大家都知道，水平方向上的居中很好做到，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都能夠實現高度固定、行數不固定的水平垂直居中了。

轉載于:https://www.cnblogs.com/yanxuan/p/6004789.html

總結

以上是生活随笔為你收集整理的高度固定，行数不固定的文字垂直居中问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。