实现文字图片垂直居中的总结性方法

首先附带HTML代码

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

接着附带box为公共样式

.box{
		 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;          
	 100px;          
	 height: 50px;           
	 top:50%;           
	 left:50%;            
	 margin-left:-50px;            
	 margin-top:-25px;           
	 text-align: center;       
}

第四种方法box4：绝对定位与margin;

兼容ie8及以上。适用于文字与图片

关键在于margin与子绝父相

css代码如下：

.box4{
    position: relative;
}

.box4 img{ 
      50%;   
     height: 50%;    
     background: #000; 
     overflow: auto;   
     margin: auto;   
     position: absolute;   
     top: 0; 
     left: 0;
     bottom: 0; 
     right: 0;  
}    

第五种方法box5：绝对定位与transform;

兼容ie9及以上。适用于文字与图片

ie8不支持transform，所以会出现兼容性问题

css代码如下：

.box5{    
position:relative;
}

.box5 img{  
     50%;   
    height: 50%;           
    position: absolute;            
    top:50%;            
    left:50%;                        
    transform:translate(-50%,-50%);            
    text-align: center;        
}

第六种方法box6：伪元素;

兼容ie8及以上。适用于文字与图片

一直对伪元素了解不够深，之后会对做更加透彻的分析，所以并不打算多做解释

css代码如下：

.box7{  
     text-align:center;  
    }
.box7 img{  
     vertical-align:middle;  
     display:inline-block;  
     }
.box7:after{ 
    content:'';  
    0;  
    height:100%; 
    display:inline-block;  
    vertical-align:middle;
}

第七种方法box7：弹性盒方法;

不兼容所有ie浏览器

适用于文字与图片。也是我最喜欢的一种方法。但是对ie浏览器并不友好。更推荐在手机端使用

css代码如下：

.box8{    
    display: flex;    
    text-align: center;
}
.box8 img{
    margin: auto;
}

第八种方法box8：display: -webkit-box;;

同样适用于手机端，ie端全部爆炸

css代码如下：

.box9{   
     display: -webkit-box;   
     -webkit-box-pack:center;  
     -webkit-box-align:center;   
     -webkit-box-orient: vertical;    
     text-align: center
}

原文链接：http://www.jiangweishan.com/article/duiqi213124124124.html