作者：ruxpinsp1 時間： 2006-02-24 文檔類型：原創 來自：藍色理想
一、單行內容的居中
只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設置 line-height 和 height，並使兩值相等，再加上 over-flow: hidden 就可以了
height: 4em;
line-height: 4em;
overflow: hidden;
}
優點：
1. 同時支持塊級和內聯極元素
2. 支持所有瀏覽器
缺點：
1. 只能顯示一行
2. IE中不支持<img>等的居中
要注意的是：
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;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p><p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>效果：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
上一個高度是用的絕對單位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不支持這些屬性，不過在其他瀏覽器上顯示效果非常完美。
要注意的是：和一個合法的<td>元素必須在<table>裏一樣，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
最後附上自己寫的，所有居中佈局的範例網頁，大家不明白可以參考
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Demo:: vertical align: middle</title><meta lang="en" name="author" content="Spenser Lee" /><meta lang="en" name="copyright" content="(c)2006 Liberty Studio" />
<style media="screen" type="text/css">...
html,body,div,h1,h2,pre,dd,ol{...}{margin: 0;padding: 0;border: 0}html{...}{min-width: 779px}body{...}{background: #fff;color: #596480;text-align: center}div#main-wrapper{...}{padding: 12px 5px;width: 769px;margin: 0 auto}div,code,p,h1,h2,address,dt,dd,li{...}{font: normal 12px/1.5em Tahoma,"Lucida Grande",Helvetica,Verdana,Lucida,Arial,"Arial Unicode",sans-serif,serif}h1{...}{font-size: 22px;font-weight: bold;border-left: 12px solid #324f96;background: #e0eaf4;color: #4868a9;height: 4em;line-height: 4em;padding: 0 12px;overflow: hidden; text-align: left}h2{...}{font-size: 12px;font-weight: bold;background: #c0014e;color: #fff;height: 2.5em;line-height: 2.5em;padding: 0 24px;overflow: hidden;margin: 12px 0;text-align: left}h2 a{...}{color: #fff;background: transparent}h2 a:hover{...}{text-decoration: none}p{...}{margin: 6px 0;padding: 0 12px 0 24px;text-indent: 2em;text-align: left}p.snap-back{...}{text-align: right}code{...}{display: block;font-family: "Courier New", Courier, monospace, mono, serif;margin: 12px auto;padding: 12px;border: 1px solid #596480;color: inherit;background: #f6f6f6;text-align: left;white-space: pre;width: 350px}strong{...}{font-weight: bold}em{...}{font-style: italic}address{...}{display: block;padding: 0 12px;margin: 12px 0;text-align: right}dl{...}{margin: 6px 0;padding: 0 12px 0 24px;text-align: left}dt{...}{margin: 0;text-indent: 2em;font-weight: bold}dd{...}{margin-left: 24px;text-indent: 2em}li{...}{list-style: square inside none;text-align: left}ol#table-of-content{...}{padding-left: 24px}a{...}{color: #c0014e;background: transparent;text-decoration: none}a:hover{...}{text-decoration: underline}div.demo{...}{width: 400px;margin: 12px auto;border: 1px solid #596480;color: inherit;background: #ffc}div.demo p{...}{text-align: left;margin: 24px;text-indent: 0}p#demo-1{...}{margin: 12px auto;padding: 0 12px;width: 400px;text-indent: 0