CSS實現DIV內容置中(垂直)方法

首先，要有一個概念：凡是 table 布局可以實現的，CSS 一定可以實現。CSS 可以實現的，table 未必能做到。

現在來幾個例子：

一、單行內容的置中
只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設定 line-height 和 height，並使兩值相等，再加上 over-flow: hidden 就可以了

代碼如下	複製代碼
.middle-demo-1{     height: 4em;     line-height: 4em;     overflow: hidden;     }

優點：
1. 同時支援塊級和內聯極元素
2. 支援所有瀏覽器
缺點：
1. 只能顯示一行
2. IE中不支援<img>Loen'Blog Images等的置中
要注意的是：
1. 使用相對高度定義你的 height 和 line-height
2. 不想毀了你的布局的話，overflow: hidden 一定要
為什嗎？

請比較以下兩個例子：

代碼如下	複製代碼
<p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height: 24px; width: 370px;">Loen'Blog</p>     <p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height: 2em; width: 370px; overflow: hidden;">Loen'Blog</p>

上一個高度是用的絕對單位px，並且沒有隱藏溢出，下一個高度用的單位是相對單位em，並且隱藏了溢出。如果你的瀏覽器支援放大字型，那麼盡情地放大字型，看看會出現什麼效果。

二、多行內容置中，且容器高度可變
也很簡單，給出一致的 padding-bottom 和 padding-top 就行

代碼如下	複製代碼
.middle-demo-2{     padding-top: 24px;     padding-bottom: 24px;     }

優點：
1. 同時支援塊級和內聯極元素
2. 支援非常值內容
3. 支援所有瀏覽器
缺點：
容器不能固定高度

三、把容器當作表格單元
CSS 提供一系列diplay屬性值，包括 display: table, display: table-row, display: table-cell 等，能把元素當作表格單元來顯示。這是再加上 vertical-align: middle, 就和表格中的 valign=”center” 一樣了。

代碼如下	複製代碼
.middle-demo-3{     display: table-cell;     height: 300px;     vertical-align: middle;     }

可惜IE不支援這些屬性，不過在其他瀏覽器上顯示效果非常完美。
要注意的是：和一個合法的元素必須在
裡一樣，display: table-cell 元素必須作為 display: table 的元素的子孫出現。 優點： 不用說了吧，就是表格，效果和表格一模一樣 缺點： IE下無效

四、以毒攻毒！用 IE 的 bug 解決 IE 中的絕對置中
先不得不說一句，IE 真的是個很爛的瀏覽器，CSS1中的定義都不支援，害得要我們轉個大圈子來造置中。不過就像我說的，凡是 table 布局可以實現的，CSS 一定可以實現，即使在 IE 裡也不例外。我研究 IE layout 模式多年，還是找出了一個可以在 IE 中絕對置中的方法。這個方法就是基於 IE layout 的 bug，也可以算以毒攻毒。至於原理，不要問我，這是獨門秘學，何況三言兩語也講不清楚，只要好用就行

代碼如下	複製代碼
.middle-demo-4{     height: 300px;     position: relative;     }     .middle-demo-4 div{     position: absolute;     top: 50%;     left: 0;     }     .middle-demo-4 div div{     position: relative;     top: -50%;     left: 0;     }

五、整合三和四，寫出支援所有瀏覽器的垂直置中容器！
思路是利用 IE 和 非IE 瀏覽器的 CSS hack, 整合三和四的CSS，寫出相容主流瀏覽器的垂直置中容器。具體代碼就不給出了，大家權當作練習練習。例子可以在下面的附錄中找到。
最終實測支援的瀏覽器：IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+
IE5 下需要加上對合適模型的補正。
推測支援的瀏覽器：Mozilla 1.5+, Netscape Navigator 7+, Opera 7+
未測試瀏覽器：Konqueror