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

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

原文地址：https://www.cnblogs.com/liyouwu/p/9003661.html