高度固定，行数不固定的文字垂直居中问题

Posted 2020-08-16 星星眨眼

大家都知道，水平方向上的居中很好做到，text-align:center即可做到；垂直方向上的居中如果文字行数和高度都固定也很好实现，但是如果行数不固定呢？

最近，接到一个需求：高度固定，文字行数可能为一行、两行，但不管多少行，文字都要垂直居中。例如：

对于H5页面来说，CSS3的translate即可做到，其原理是外层div相对定位，里面的元素绝对定位，距离父容器的top值为50%，然后通过translate属性让它相对于自身向上移动50%。

其css为：

对于PC来说，就没这么好糊弄了：低版本浏览器不支持CSS3属性，那么我们应该怎么做呢？表格有一个特点是无论里面文字多少，内容都可以垂直居中。因此我们可以使用表格的方式 实现文本垂直居中，同理 我们可以用CSS来模拟表格垂直居中。而display：table可以做到：

不过低版本的IE浏览器不支持display:table，所以为了兼容IE浏览器，还需要使用css Hack来实现：

其css为：

这样，无论是在PC，还是在H5都能够实现高度固定、行数不固定的水平垂直居中了。