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

Posted 2020-11-03 liyouwu

首先附带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;       
}