方法一：
設定父元素高度，設定子元素行高垂直居中
<style
>
*div
span
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
>
*div
style
>
<
div>
<
span
>測試文字測試文字
span
>
div>
<
div>
測試文字測試文字
div>
<
div>
<
span
>測試文字 <
br/> 測試文字<
br/> 測試文字<
br/> 測試文字<
br/> 測試文字<
br/> 測試文字
span
>
div>
優點：等高布局，無需設定高度，文字輕鬆實現垂直居中
缺點：ie7以下不相容！
css中如何固定元素的寬度和高度
直接開門見山啦，請看下面 與效果 one two style head class one 固定高寬值div class two 高寬值加上了padding border值，不包括margindiv body box sizing content box 預設值 border box 1.conte...
子元素div高度不確定時父div高度如何自適應
點評 每當進行頁面布局時，我們都有這樣的需求，就是當子元素div高度不確定時父div自適應高度，本文整理的多種方法可以解決此問題，感興趣的朋友可以參考下 在最外層div加以下樣式 height 100 overflow hidden 其它方法 div即父容器不根據內容自適應高度，我們看下面的 複製 ...
垂直居中 父元素高度確定的多行文字（方法一）
父元素高度確定的多行文字 塊狀元素的豎直居中的方法有兩種 方法一 使用插入 table 包括tbody tr td 標籤，同時設定 vertical align middle。說到豎直居中，css 中有乙個用於豎直居中的屬性 vertical align，但這個樣式只有在父元素為 td 或 th 時...