場景：父元素 高度固定，如何使其中的文字垂直居中？
方法一：
測試文字測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
關鍵樣式：
① 父元素（這裡是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。
測試文字測試文字
測試文字測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
優點：等高布局，無需設定高度，文字輕鬆實現垂直居中
缺點：ie7以下不相容！
css布局 多行文字垂直居中
方法一 1789 測試文字測試文字 10 1112 測試文字 測試文字 測試文字 測試文字 測試文字 測試文字 13結果圖 關鍵樣式 父元素 這裡是div 設定和高度一致的 line height 這裡是200px 由後面的vertical align定義看，這是為了設定div的基線 子元素 這裡是...
CSS多行文字垂直居中
今天需要將文字垂直居中，就是一行是垂直居中，多行也是垂直居中。效果如下 實現 同事提供 doctype html html head lang en meta charset utf 8 title title style listdiv listdivleft listdivleft span l...
CSS多行文字垂直居中
今天需要將文字垂直居中，就是一行是垂直居中，多行也是垂直居中。效果如下 實現 同事提供 doctype html html head lang en meta charset utf 8 title title style listdiv listdivleft listdivleft span l...