一直比較糾結垂直居中的問題，最近又查閱了一些資料，借鑒了一些優秀方案，搗鼓出了一個兼容性較強的多行文本垂直居中解決方案，主要思路依然是利用vertical-align:middle來實現，經過測試，該方案能兼容IE6及以上版本的瀏覽器，先看代碼：

?1?<style?type="text/css">
?2?.box?{
?3?????border:?1px?dashed?#cccccc;
?4?????height:?300px;
?5?????font-size:?0;
?6?}
?7?.box?p,?.box?i?{
?8?????display:?inline-block;
?9?????vertical-align:?middle;
10?????overflow:?hidden;
11?????*display:inline;
12?????*zoom:1;
13?}
14?.box?i?{
15?????height:?100%;
16?????width:?0;
17?}
18?.box?p?{
19?????font-size:?14px;
20?????width:?100%;
21?}
22?</style>
23?<div?class="box">
24???<p?class="text">多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居</p>
25???<i></i>
26??</div>

關于該方案有幾點說明：

1.行元素的vertical-middle屬性需要一個參照物，所以這里在需要垂直居中的多行文本后面增加了一個空標簽<i></i>，讓需要垂直居中的元素相對于這個空標簽垂直居中，另外將空標簽的高度設為100%也是該方案的關鍵

2.設置垂直居中元素<p></p>和參照物<i></i>的display為inline-block，這樣兩個元素就能現實在一行之中

3.設置父元素<div></div>的font-size為0是為了解決inline-block之間的空格問題，保證元素<p></p>和參照物<i></i>顯示在同一行

該方案主要思路是為需要垂直居中的元素找到一參照元素并保證它們同一行顯示，從而達到多行文本垂直居中。如果不需要兼容IE6\7，參照元素<i></i>可以用:after或者:before來代替

?

轉載于:https://www.cnblogs.com/daxiong/articles/3750675.html

總結

以上是生活随笔為你收集整理的CSS之未知高度多行文本垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

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