一直比較糾結(jié)垂直居中的問題，最近又查閱了一些資料，借鑒了一些優(yōu)秀方案，搗鼓出了一個兼容性較強(qiáng)的多行文本垂直居中解決方案，主要思路依然是利用vertical-align:middle來實(shí)現(xiàn)，經(jīng)過測試，該方案能兼容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>

關(guān)于該方案有幾點(diǎn)說明：

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

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

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

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/daxiong/articles/3750675.html

總結(jié)

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

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