除了上一節(jié)講到的插入table標簽，可以使父元素高度確定的多行文本垂直居中之外，本節(jié)介紹另外一種實現(xiàn)這種效果的方法。但這種方法兼容性比較差，只是提供大家學習參考。

在?chrome、firefox?及?IE8?以上的瀏覽器下可以設置塊級元素的?display?為?table-cell（設置為表格單元顯示），激活?vertical-align屬性，但注意?IE6、7?并不支持這個樣式,?兼容性比較差。

html代碼：

<div class="container"><div><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p></div> </div> css代碼： <style> .container{height:300px;background:#ccc;display:table-cell;/*IE8以上及Chrome、Firefox*/vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>

這種方法的好處是不用添加多余的無意義的標簽，但缺點也很明顯，它的兼容性不是很好，不兼容?IE6、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質(zhì)。

轉(zhuǎn)載于:https://www.cnblogs.com/Rinpe/p/5559095.html

總結

以上是生活随笔為你收集整理的垂直居中-父元素高度确定的多行文本（方法二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。