多行文本垂直居中的问题

在网页制作过程中，经常会碰到文字垂直居中的问题，单行文本居中使用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，但是有一点不足的是，文本的高度不能超过外部盒子的高度，如果超过盒子高度，此设置将不会有效果。如下图所示：