一、表格布局法
table-cell轻松设置文本图片水平垂直居中
让一个元素垂直居中的思路：把这个元素的容器设置为table-cell，也就是具有表格单元格的特性，再使用vertical-align这个属性对block元素不起作用，但对table-cell元素是有效的)设置元素垂直居中，即可达到我们想要的效果。好处是不需要事先知道子元素的高度。
IE
7及以下版本不支持此方法，IE8及以上版本及大部分的主流浏览器都很好的支持。
<div class="outer">
<div class="inner">
content
</div>
</div>
.outer{
display:table-cell;
vertical-align:middle;
text-algin:center;
}
二、绝对定位法
利用相对定位使元素垂直居中：要求元素有固定的高度，设置元素的top:50%,这样元素的上边边界线和该元素的父级元素的垂直方向的中线重合，设置margin-top,值为负的元素高度的一半，让元素向上移动半个高度的位置，就可以使元素的垂直方向的中线与父级元素的中线重合，即实现了元素的垂直居中。
<div class="outer">
<div class="inner">
content
</div>
</div>
.outer{
width:200px;
height:200px;
position:relative;
}
.inner{
position:absolute;
top:50%;
left:50%;
width:100px;
height:100px;
margin-top:-50px;
margin-left:-50px;
}
三、使用css3的新属性transform:translate(x,y)属性
在上面的方法中，我们要知道子元素的高度，但是如果高度不确定怎么办，这时候我们可以利用css3的transform属性，具体的代码如下：
.outer{
width:200px;
height:200px;
position:relative;
background-color:pink;
}
.inner{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
}
这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好
四、绝对定位法
利用position:absolute属性，设置top/bottom/right/left。
.outer{
width:200px;
height:200px;
position:relative;
background-color:pink;
}
.inner{
position:absolute;
width:100px;
height: 100px;
margin:auto;
top:0;
bottom: 0;
left: 0;
right: 0;
}
原文链接：https://blog.csdn.net/kukuhang/article/details/102897319
