如何令文本在块级元素中垂直居中

一，使用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: 40px;
    }
<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。