場景：父元素 高度固定，如何使其中的文字垂直居中？
1、table布局：
利用display:table+display:table-cell的方法
"en">class="
middle-box
">
class="
middle-inner
">
class="
suc-tip
">前端開發部落格，專注前端開發和web教程
class="
suc-link
">快捷入口："
">5年的老部落格，一直致力於web開發
"en效果：">class="">
class="
middle-inner
">
class="
suc-tip
">前端開發部落格，專注前端開發和web教程
class="
suc-link
">快捷入口："
">5年的老部落格，一直致力於web開發
利用display:table-cell
"en效果：">
"utf-8
">
css居中對齊測試文字測試文字
測試文字測試文字
測試文字測試文字
測試文字測試文字
優點：等高布局，無需設定高度，文字輕鬆實現垂直居中
缺點：ie7以下不相容！
2、利用line-height和vertical-align：
"en效果：">
"utf-8
">
css居中對齊測試文字測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
測試文字
關鍵樣式：
① 父元素（這裡是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的結束標籤和內部內容要連在一起。
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...
css布局 多行文字垂直居中
場景 父元素 高度固定，如何使其中的文字垂直居中？方法一 測試文字測試文字 測試文字 測試文字 測試文字 測試文字 測試文字 測試文字 結果截圖 關鍵樣式 父元素 這裡是div 設定和高度一致的 line height 這裡是200px 由後面的vertical align定義看，這是為了設定div...