CSS垂直居中基本上经常需要用到的一个需求，而且面试的时候也有的公司会考察这个问题，但是需要手写出来，所以对于这个老生常谈的问题还是需要记住，下面就是我总结出了几种垂直居中的方法：
基于绝对定位的方法
这种方法采用了绝对定位的方法适用于，固定宽高的模块。废话不说上代码 html
1
2
3
<div class="main">
<div class="center">居中文本</div>
</div>
css
1
2
3
4
5
6
7
8
9
10
.main {
position: relative;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
- 原理就是使用绝对定位相对于父元素，先设置居左left、居上top偏移50%，此偏移是根据当前元素的左上角定位的，此时还不能居中，想要居中还需要设置位移。
- 再使用MDN transform中的translate进行位移，translate移动是根据元素中心作为参考值移动的，所以以元素中心为基点，再向左、向上移动-50%（自身宽度的一半），此元素就达到居中的效果了。
table垂直居中
1
2
3
4
5
<table style="width=100%">
<tr>
<td>这是table垂直居中</td>
</tr>
</table>
如果担心语义上的不同，可以使用如下方式 html
1
2
3
<div class="table-style">
<div class="table-cell">table垂直居中</div>
</div>
css
1
2
3
4
5
6
7
8
9
10
.table-style {
display: table;
width: 100%;
}
.table-cell {
display: table-cell;
text-align: center;
vertical-align: middle;
}
使用Flex解决方案
html
1
2
3
<div class="main">
<div class="center">flex居中</div>
</div>
css
1
2
3
4
5
6
7
.main {
width：100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
Flex中的align-items定义项目在交叉轴上如何对齐，center是交叉轴的中点对齐，而justify-content定义了项目在主轴上的对齐方式，center在主轴方向居中，两者组合就可以实现垂直居中的效果。
这就是我总结的三种垂直居中的方法，如何还有更好的方法欢迎交流。