如何令文本在塊級元素中垂直居中

一，使用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。