首先附帶HTML代碼

<div class="box box1 box2 box3 box4 box5 box7 box8 box9">
	    <div>垂直居中</div>
</div>

接著附帶box為公共樣式

.box{
		width: 200px;
		height: 200px;
		background: pink;
}

第一種方法box1：display: table-cell;

兼容ie8及以上。適用於文字與圖片

css代碼如下：

.box1{    
	    display: table-cell;    
	    vertical-align: middle;    
	    text-align: center;            
}

第二種方法box2：display: flex;

兼容ie10及以上。適用於文字與圖片

css代碼如下：

.box2{    
    display: flex;    
    justify-content:center;    
    align-items:Center;
}

第三種方法box3：絕對定位和負邊距;

兼容ie6及以上。適用於文字與圖片

但是需要註意的是，需要設置準備的寬高，並且使用的負邊距為寬高的一半

css代碼如下：

.box3{    
	position:relative;
}
.box3 img{           
	 position: absolute;          
	 width:100px;          
	 height: 50px;           
	 top:50%;           
	 left:50%;            
	 margin-left:-50px;            
	 margin-top:-25px;           
	 text-align: center;       
}

實現文字圖片垂直居中的總結性方法