場景：父元素 高度固定，如何使其中的文字垂直居中？

方法一：

程式碼：

    <style>
        *{padding: 0;margin:0;font-size: 12px;}
        div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid blue; line-height: 200px;}
        span{display: inline-block;vertical-align: middle;line-height: 22px;}
    </style>

    <div>
        <span>測試文字測試文字</span>
    </div>
    <div>
        <span>測試文字 <br/> 測試文字<br/> 測試文字<br/> 測試文字<br/> 測試文字<br/> 測試文字</span>
    </div>
 

關鍵樣式：

① 父元素（這裡是div）設定和高度一致的 line-height （這裡是200px）--- 由後面的vertical-align定義看，這是為了設定div的基線

② 子元素 (這裡是span) 設定合適的line-height，並設定display:inline-block、vertical-align: middle;  --- inline水平的元素無法設定line-height。所以這裡要設定inline-block。

重新審視一下 CSS vertical-align 屬性 的定義：

該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。

由以上需要注意 ：

① vertical-align屬性應該設定到 行內元素上（行內塊元素也可）

② 如果文字的總高度超出了 容器（這裡是div）的高度，那麼垂直居中會失效。

③ ie7以下 span結束標籤和內部內容不能有間隔空白，也就是說span的結束標籤和內部內容要連在一起。

方法二：

利用display:table-cell。

    <style>
        *{padding: 0;margin:0;font-size: 12px;}
        div{display: table-cell;width: 200px;border:1px solid blue;vertical-align: middle;}
    </style>

    <div>
        <span>測試文字測試文字</span>
    </div>
    <div>
        測試文字測試文字
    </div>
    <div>
        <span>測試文字 <br/> 測試文字<br/> 測試文字<br/> 測試文字<br/> 測試文字<br/> 測試文字</span>
    </div>
 

優點：等高佈局，無需設定高度，文字輕鬆實現垂直居中

缺點：ie7以下不相容！