CSS 瀏覽器相容的水平/垂直置中方法

no_mkd

一. 水平置中

文本、圖片等行內元素的水平置中

給父元素設置 text-align: center; 例如：DemoDemo

確定寬度的區塊級元素的水平置中

設置 margin-left: auto; margin-right: auto; 例如：Demo

不確定寬度的區塊級元素的水平置中

方法 1

利用 table 元素自動計算寬度的特性 + margin-left: auto; margin-right: auto; 實現，例如：Demo

方法 2

把區塊級元素設置為 display: inline; 再按照行內元素處理（給容器設置 text-align: center; ），例如

方法 3

給容器設置 float: left; 和 position: relative; 和 left: 50%; 子元素設置 position: relative; 和 left: -50%; （可選是否添加 float: left; 橫向排列）

二. 垂直置中

父元素高度不確定的文本、圖片、區塊級元素的垂直置中

給容器設置 padding-top = padding-bottom 即可，例如：Demo

父元素高度確定的單行文本的垂直置中

設置 line-height 等於容器高度可以實現，例如：Demo

父元素高度確定的多行文本、圖片、區塊級元素的垂直置中

方法 1

利用 table 子元素 th/td 的預設 vertical-align: middle; （要給 table 設置 height: 100%; ）實現，例如：Demo

方法 2

用 display: table-cell; 加上 vertical-align: middle; 再加 css hack 實現，例如：Demo

css hack for ie6/7 有效性未經測試