多行文本垂直居中的問題

在網頁製做過程當中，常常會碰到文字垂直居中的問題，單行文本居中使用line-height很容易解決，可是多行文本垂直居中，卻不能使用此方法來設置，下面參考了各位網友的總結，有如下兩種方法，供你們參考：

方法一：使用display:table和display:table-cell屬性來模擬表格

1. 對外圍盒子設置display:table屬性，模擬表格

     2. 對文本外部包裹一個span標籤，對其設置display:table-cell和vertical-align:middle屬性　　　　

效果如圖所示：

 

　　

 

代碼以下：

　　html代碼：

1 <div class="box">
2     <span>
3         <p>多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。</p>
4     </span>
5 
6 </div>

　　css代碼以下：

 1 <style type="text/css">
 2         *{margin: 0;padding: 0;}
 3         .box{
 4             margin: 40px auto;
 5             border: 1px solid #ccc;
 6             width: 300px;
 7             height: 300px;
 8             display: table;
 9         }
10         .box span{
11             display: table-cell;
12             vertical-align: middle;
13         }
14 </style>

此方法可以有效提升代碼的可複用性，可是此方法不兼容IE6/7！

 

方法二：模擬單行文原本實現多行文本居中

1. 對外圍盒子設置固定寬高
2. 對其設置display:inline-block屬性，使其轉化成行內塊元素，模擬成單行文本。而且對其設置vertical-align:middle屬性，使其基線對齊。添加line-height屬性，覆蓋盒子所給予的行高。

效果如圖所示：

代碼以下：

　　HTML代碼：

1 <div class="box">
2    
3         <p>多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。</p>
4    
5 
6 </div>

　　css代碼：

 1 <style type="text/css">
 2     *{margin: 0;padding: 0;}
 3     .box{
 4         margin: 40px auto;
 5         border: 1px solid #ccc;
 6         width: 300px;
 7         height: 300px;
 8         line-height: 300px;
 9     }
10     .box p{
11         display:inline-block;
12         line-height: 30px;/*覆蓋父級元素的行高*/
13         vertical-align: middle;/*基線居中對齊*/
14     }
15 </style>

 

 此方法可以很好地兼容IE6/7，可是有一點不足的是，文本的高度不能超過外部盒子的高度，若是超過盒子高度，此設置將不會有效果。以下圖所示：