多行文本垂直居中的問題

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

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

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

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

效果如圖所示：

 

　　

 

代碼如下：

　　html代碼：

<div class="box">
    <span>
        <p>多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。</p>
    </span>

</div>

　　css代碼如下：

<style type="text/css">
        *{margin: 0;padding: 0;}
        .box{
            margin: 40px auto;
            border: 1px solid #ccc;
            width: 300px;
            height: 300px;
            display: table;
        }
        .box span{
            display: table-cell;
            vertical-align: middle;
        }
</style>

此方法能夠有效提高代碼的可復用性，但是此方法不兼容IE6/7！

 

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

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

效果如圖所示：

代碼如下：

　　HTML代碼：

<div class="box">
   
        <p>多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。</p>
   

</div>

　　css代碼：

<style type="text/css">
    *{margin: 0;padding: 0;}
    .box{
        margin: 40px auto;
        border: 1px solid #ccc;
        width: 300px;
        height: 300px;
        line-height: 300px;
    }
    .box p{
        display:inline-block;
        line-height: 30px;/*覆蓋父級元素的行高*/
        vertical-align: middle;/*基線居中對齊*/
    }
</style>

 

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