大家都知道,水平方向上的居中很好做到,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都能够实现高度固定、行数不固定的水平垂直居中了。