块级元素文本垂直居中方法

块级元素的居中有如下解决方案：

一、使用line-height样式

<style>
    div {
        width: 300px;
        height: 200px;
        background: lightgray;
        line-height: 200px;  /* line-height值与元素高度值保持一致 */
    }
</style>
<div>这段文字将垂直居中</div>

执行结果：

只适用于内容为单行文本、且元素高度已经指定的情况下。多行文本将溢出，未指定元素高度则无法确定line-height的值。

二、使用padding样式

<style>
    div {
        width: 300px;
        background: lightgray;
        padding: 30px;
    }
<style>
<div>这段文字将垂直居中</div>

执行结果：

仅限于元素高度不确定的情况下，如果指定了元素高度，这种方法就不适用了。

三、使用display将元素模拟为表格

<style>
    div.outer {
        width: 300px;
        height: 200px;
        background: lightgray;
        display: table;
    }
    div.inner {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div class="outer">
    <div class="inner">这段文字将垂直居中，无论这段文字是多行还是单行，他都能完美的显示在块级元素中间。</div>
</div>

执行结果：

这种方法嵌套了一个新的div，将div.outer显示为表格，div.inner显示为单元格，而单元格具有valign属性，因此vertical-align可对其产生作用。比第二种方法优秀的是，这种方法也适用于指定了高度的元素。此方法缺点是不支持IE6。