之前看到很多人一(yī)直都問這個問題，不過當時我(wǒ)(wǒ)沒當一(yī)回事，因爲在 CSS 中(zhōng)要垂直居中(zhōng)，多數是在有高度的情況下(xià)，或者容器高度不定的情況下(xià)才用，看上去(qù)比較舒服，而且實現的方法也不少，不一(yī)定要拘泥于和 table 布局一(yī)樣。不過最近有人問了幾個例子，看來對此的需求還不少。現在就把我(wǒ)(wǒ)經驗拿出來分(fēn)享一(yī)下(xià)，希望大(dà)家鼓鼓掌。
首先，要有一(yī)個概念：凡是 table 布局可以實現的，CSS 一(yī)定可以實現。CSS 可以實現的，table 未必能做到。
現在來幾個例子：
一(yī)、單行内容的居中(zhōng)
隻考慮單行是最簡單的，無論是否給容器固定高度，隻要給容器設置 line-height 和 height，并使兩值相等，再加上 over-flow: hidden 就可以了
.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}
優點：
1. 同時支持塊級和内聯極元素
2. 支持所有浏覽器
缺點：
1. 隻能顯示一(yī)行
2. IE中(zhōng)不支持<img>等的居中(zhōng)
要注意的是：
1. 使用相對高度定義你的 height 和 line-height
2. 不想毀了你的布局的話(huà)，overflow: hidden 一(yī)定要
爲什麽？
請比較以下(xià)兩個例子：
<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>
<br/>
<br/>
<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>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
上一(yī)個高度是用的絕對單位px，并且沒有隐藏溢出，下(xià)一(yī)個高度用的單位是相對單位em，并且隐藏了溢出。如果你的浏覽器支持放(fàng)大(dà)字體(tǐ)，那麽盡情地放(fàng)大(dà)字體(tǐ)，看看會出現什麽效果。
二、多行内容居中(zhōng)，且容器高度可變
也很簡單，給出一(yī)緻的 padding-bottom 和 padding-top 就行
.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}
優點：
1. 同時支持塊級和内聯極元素
2. 支持非文本内容
3. 支持所有浏覽器
缺點：
容器不能固定高度
三、把容器當作表格單元
CSS 提供一(yī)系列diplay屬性值，包括 display: table, display: table-row, display: table-cell 等，能把元素當作表格單元來顯示。這是再加上 vertical-align: middle, 就和表格中(zhōng)的 valign="center" 一(yī)樣了。
.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}
可惜IE不支持這些屬性，不過在其他浏覽器上顯示效果非常完美。
要注意的是：和一(yī)個合法的<td>元素必須在<table>裏一(yī)樣，display: table-cell 元素必須作爲 display: table 的元素的子孫出現。
優點：
不用說了吧，就是表格，效果和表格一(yī)模一(yī)樣
缺點：
IE下(xià)無效
四、以毒攻毒！用 IE 的 bug 解決 IE 中(zhōng)的絕對居中(zhōng)
先不得不說一(yī)句，IE 真的是個很爛的浏覽器，CSS1中(zhōng)的定義都不支持，害得要我(wǒ)(wǒ)們轉個大(dà)圈子來造居中(zhōng)。不過就像我(wǒ)(wǒ)說的，凡是 table 布局可以實現的，CSS 一(yī)定可以實現，即使在 IE 裏也不例外(wài)。我(wǒ)(wǒ)研究 IE layout 模式多年，還是找出了一(yī)個可以在 IE 中(zhōng)絕對居中(zhōng)的方法。這個方法就是基于 IE layout 的 bug，也可以算以毒攻毒。至于原理，不要問我(wǒ)(wǒ)，這是獨門秘學，何況三言兩語也講不清楚，隻要好用就行
.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;
}
五、整合三和四，寫出支持所有浏覽器的垂直居中(zhōng)容器！
思路是利用 IE 和 非IE 浏覽器的 CSS hack, 整合三和四的CSS，寫出兼容主流浏覽器的垂直居中(zhōng)容器。具體(tǐ)代碼就不給出了，大(dà)家權當作練習練習。例子可以在下(xià)面的附錄中(zhōng)找到。
最終實測支持的浏覽器：IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下(xià)需要加上對合适模型的補正。
推測支持的浏覽器：Mozilla 1.5+, Netscape Navigator 7+, Opera 7+
未測試浏覽器：Konqueror
最後附上自己寫的，所有居中(zhōng)布局的範例網頁，大(dà)家不明白(bái)可以參考。
<?<a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a> version="1.0" encoding="utf-8"?>
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.0 Strict//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>1/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>1-strict.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; 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/<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>">
<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>,body,div,h1,h2,pre,dd,ol{margin: 0;padding: 0;border: 0}
<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>{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;border: 1px solid #596480;color: inherit;background: #ffc;line-height: 4em;height: 4em;overflow: hidden}
div#demo-2{padding: 50px 0}
div#demo-4, div#demo-5{height: 300px;position: relative}
div#demo-4 div, div#demo-5 div{position: absolute;top: 50%;left: 0}
div#demo-4 p, div#demo-5 p{position: relative;top: -50%}
div#demo-3{display: table;height: 300px;border-collapse: collapse}
div#main-wrapper>div#demo-5{position: static;display:table}
div#main-wrapper>div#demo-5>div{display:table-cell;vertical-align:middle;position:static}
div#demo-3>div{display: table-row}
div#demo-3>div>div{display: table-cell;vertical-align: middle}
span.property{font-family: "Courier New", Courier, monospace, mono, serif;border-bottom: 1px dotted #596480;background: #ffc;color: #c0014e}
p.copyright{line-height: 3em;text-align: center;border-top: 1px dotted #596480}
</style>
</head>
<body>
<div id="main-wrapper">
<h1>Demo of middled vertical align</h1>
<address>
Author: Spenser Lee, Liberty Studio<br />
Originally posted on <a href="http://www.blueidea.com/bbs/" title="BlueIdea Forum">BlueIdea Forum</a>
</address>
<h2><a id="bullet-0">Table of centents:</a></h2>
<ol id="table-of-content">
<li><a href="../../#bullet-1" title="Single line countainer with/without a fixed height">Single line countainer with/without a fixed height</a></li>
<li><a href="../../#bullet-2" title="Align multi-line container which does not have a fixed height">Align multi-line container which does not have a fixed height</a></li>
<li><a href="../../#bullet-3" title="Simulating table layout in container with a fixed height">Simulating table layout in container with a fixed height</a></li>
<li><a href="../../#bullet-4" title="IE's solution">IE's solution</a></li>
<li><a href="../../#bullet-5" title="A perfect compounded sample">A perfect compounded sample</a></li>
</ol>
<h2><a id="bullet-1">Case One: Single line countainer with/without a fixed height</a></h2>
<p>If you only want to display a container which only holds a single line of text, you can set <span class="property">line-height</span> property to <span class="property">height</span> property, then set <span class="property">overflow</span> to hidden.</p>
<p><strong>Sample:</strong></p>
<p id="demo-1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p><strong>Core code:</strong></p>
<pre><code>.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}</code></pre>
<dl>
<dt>Notes:</dt>
<dd>
<ol>
<li>I strongly recommend you use relative size in <span class="property">height</span> and <span class="property">line-height</span> property. <em>Why?</em> You can simply set the font size larger if your browser support it. When it gets large enough, you will see the countainer is stretched and the <span class="property">height</span> is no longer equal to <span class="property">line-height</span> property, thus, the layout is messed up. Using relative size as <span class="property">em, ex</span> or <span class="property">%</span> will let your countainer stretch with the content.</li>
<li><span class="property">overflow: hidden</span> is a must. <em>Why?</em> Same as above. Just ensure <span class="property">height</span> and <span class="property">line-height</span> are always equal.</li>
</ol>
</dd>
</dl>
<dl>
<dt>Pros:</dt>
<dd>
<ol>
<li>Fits in both <span class="property">block</span> elements and <span class="property">inline</span> elements.</li>
<li>Capable of all 5th-gen browsers.</li>
</ol>
</dd>
</dl>
<dl>
<dt>Cons:</dt>
<dd>
<ol>
<li>Text length is limited. Max with only <em>one</em> line.</li>
<li>Does not work well on none text contents such as images and objects.</li>
</ol>
</dd>
</dl>
<p class="snap-back"><a href="../../#bullet-0" title="Back top table of centents">Back</a></p>
<h2><a id="bullet-2">Case Two: Align multi-line container which does not have a fixed height</a></h2>
<p>In this case, we should simply set a pair of fixed equivalences to padding-top and padding-bottom attribute. It works on both IE and non-IE browsers.</p>
<p><strong>Sample:</strong></p>
<div class="demo" id="demo-2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.</p>
</div>
<p><strong>Core code:</strong></p>
<pre><code>.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}</code></pre>
<dl>
<dt>Pros:</dt>
<dd>
<ol>
<li>Fits in both <span class="property">block</span> elements and <span class="property">inline</span> elements.</li>
<li>Works on none text contents as fine as text contents.</li>
<li>Capable of all 5th-gen browsers. Might need a little tune-up for the box model bug of IE5 though.</li>
</ol>
</dd>
</dl>
<dl>
<dt>Cons:</dt>
<dd>
<ol>
<li>You can <em>not</em> assign height in this solution.</li>
</ol>
</dd>
</dl>
<p class="snap-back"><a href="../../#bullet-0" title="Back top table of centents">Back</a></p>
<h2><a id="bullet-3">Case Three: Simulating table layout in container with a fixed height</a></h2>
<p><a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a> offers a set of very convenient display atrribute values called <span class="property">display: table</span>, <span class="property">display: table-row</span>, <span class="property">display: table-cell</span> and other display values begin with <span class="property">table-</span>. It offers a way to simulate table layout in all elements. As a result, any element with <span class="property">display: table-cell</span>, <span class="property">vertical-align: middle</span> and a fixed height will display exactly like a table cell.</p>
<p><strong>Sample:</strong> (You may not be able to view the effect on IE)</p>
<div class="demo" id="demo-3">
<div><div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.</p></div></div>
</div>
<p><strong>Core code:</strong></p>
<pre><code>.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}</code></pre>
<dl>
<dt>Notes:</dt>
<dd>
<ol>
<li><span class="property">display: table-cell</span> must work with other elements with <span class="property">display: table</span> value sets in order to form a literal table. Or it might cause unexceptable bugs.</li>
<li>Sadly IE series (including the latest IE 7 beta) does not support any of <span class="property">display: table</span> values, so it won't work in IE.</li>
</ol>
</dd>
</dl>
<dl>
<dt>Pros:</dt>
<dd>
<ol>
<li>It has the most perfect render for <span class="property">vertical-align: middle</span> align.</li>
</ol>
</dd>
</dl>
<dl>
<dt>Cons:</dt>
<dd>
<ol>
<li>It only works in latest versions of non-IE browsers, such as Mozilla, Firefox, Netscape 8, Opera 8, and Safari.</li>
</ol>
</dd>
</dl>
<p class="snap-back"><a href="../../#bullet-0" title="Back top table of centents">Back</a></p>
<h2><a id="bullet-4">Case Four: IE's solution</a></h2>
<p>Since IE is a lame browser when it comes to ANYTHING, so you can't use the solution above simply because IE does not recognize it at all. However, <strong>there has been nothing yet you can not code with <a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a> if you have already coded it with table</strong>. It even offers you possibility to layout your page that tables can not do!</p>
<p>So what's the solution for IE? Like what we always do: Hit IE's back with the BUGS it offers!</p>
<p><strong>Sample:</strong> (You are able to view the correct result only on IE)</p>
<div class="demo" id="demo-4">
<div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.</p></div>
</div>
<pre><code>.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;
}</code></pre>
<p>See? Don't ask me why it worked. This hack is based on years of study in IE's own stupid layout model and it works very well, even in IE5 given the box width hack. I won't tell you the theory behind all these. It's my top secret, with which I solved a lot of other cross browser layout problems, and I'm not going to share it with you. But you are free to use this IE hack It's kinda handful in most occassions.</p>
<dl>
<dt>Pros:</dt>
<dd>
<ol>
<li>The only perfect vertical align method in IE. It works even better then add automatic <span class="property">padding</span>s.</li>
</ol>
</dd>
</dl>
<dl>
<dt>Cons:</dt>
<dd>
<ol>
<li>After all it's a <a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a> hack. We can avoid it if not for IE.</li>
</ol>
</dd>
</dl>
<p class="snap-back"><a href="../../#bullet-0" title="Back top table of centents">Back</a></p>
<h2><a id="bullet-5">Case Five: A perfect compounded sample</a></h2>
<p>Here's the perfect compounded solution on vertical centering that works on almost all latest browsers.</p>
<p><strong>Sample:</strong> (This works on almost all browsers)</p>
<div class="demo" id="demo-5">
<div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.</p></div>
</div>
<p>I'm not going to give you the full code of this one. But it's not difficult to write it yourself, with the solution of case 3 and 4, and a little knowledge in IE/non-IE <a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a> hackers. And actually the hacking style is not limited, so I don't want to force you to use my hacking style neither. Stop being lazy, and write the code yourself!</p>
<dl>
<dt>Browser capability:</dt>
<dd>
<ol>
<li>Works on: IE6+, Mozilla 1.5+, Netscape Navigator 7+, Opera 7+, Firefox 1.0+ and Safari 1.0+</li>
<li>On IE5, you might need to apply the box model hacker to make the height correct.</li>
<li>Untested: WebOmini, Konqueror.</li>
<li>Fails on: Other browsers not reffered in the list above.</li>
</ol>
</dd>
</dl>
<p class="snap-back"><a href="../../#bullet-0" title="Back top table of centents">Back</a></p>
<p class="copyright">Copyright © Spenser Lee, 2006 Liberty Studio</p>
</div>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
首先，要有一(yī)個概念：凡是 table 布局可以實現的，CSS 一(yī)定可以實現。CSS 可以實現的，table 未必能做到。
現在來幾個例子：
一(yī)、單行内容的居中(zhōng)
隻考慮單行是最簡單的，無論是否給容器固定高度，隻要給容器設置 line-height 和 height，并使兩值相等，再加上 over-flow: hidden 就可以了
.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}
優點：
1. 同時支持塊級和内聯極元素
2. 支持所有浏覽器
缺點：
1. 隻能顯示一(yī)行
2. IE中(zhōng)不支持<img>等的居中(zhōng)
要注意的是：
1. 使用相對高度定義你的 height 和 line-height
2. 不想毀了你的布局的話(huà)，overflow: hidden 一(yī)定要
爲什麽？
請比較以下(xià)兩個例子：
<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>
<br/>
<br/>
<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>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
上一(yī)個高度是用的絕對單位px，并且沒有隐藏溢出，下(xià)一(yī)個高度用的單位是相對單位em，并且隐藏了溢出。如果你的浏覽器支持放(fàng)大(dà)字體(tǐ)，那麽盡情地放(fàng)大(dà)字體(tǐ)，看看會出現什麽效果。
二、多行内容居中(zhōng)，且容器高度可變
也很簡單，給出一(yī)緻的 padding-bottom 和 padding-top 就行
.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}
優點：
1. 同時支持塊級和内聯極元素
2. 支持非文本内容
3. 支持所有浏覽器
缺點：
容器不能固定高度
三、把容器當作表格單元
CSS 提供一(yī)系列diplay屬性值，包括 display: table, display: table-row, display: table-cell 等，能把元素當作表格單元來顯示。這是再加上 vertical-align: middle, 就和表格中(zhōng)的 valign="center" 一(yī)樣了。
.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}
可惜IE不支持這些屬性，不過在其他浏覽器上顯示效果非常完美。
要注意的是：和一(yī)個合法的<td>元素必須在<table>裏一(yī)樣，display: table-cell 元素必須作爲 display: table 的元素的子孫出現。
優點：
不用說了吧，就是表格，效果和表格一(yī)模一(yī)樣
缺點：
IE下(xià)無效
四、以毒攻毒！用 IE 的 bug 解決 IE 中(zhōng)的絕對居中(zhōng)
先不得不說一(yī)句，IE 真的是個很爛的浏覽器，CSS1中(zhōng)的定義都不支持，害得要我(wǒ)(wǒ)們轉個大(dà)圈子來造居中(zhōng)。不過就像我(wǒ)(wǒ)說的，凡是 table 布局可以實現的，CSS 一(yī)定可以實現，即使在 IE 裏也不例外(wài)。我(wǒ)(wǒ)研究 IE layout 模式多年，還是找出了一(yī)個可以在 IE 中(zhōng)絕對居中(zhōng)的方法。這個方法就是基于 IE layout 的 bug，也可以算以毒攻毒。至于原理，不要問我(wǒ)(wǒ)，這是獨門秘學，何況三言兩語也講不清楚，隻要好用就行
.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;
}
五、整合三和四，寫出支持所有浏覽器的垂直居中(zhōng)容器！
思路是利用 IE 和 非IE 浏覽器的 CSS hack, 整合三和四的CSS，寫出兼容主流浏覽器的垂直居中(zhōng)容器。具體(tǐ)代碼就不給出了，大(dà)家權當作練習練習。例子可以在下(xià)面的附錄中(zhōng)找到。
最終實測支持的浏覽器：IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下(xià)需要加上對合适模型的補正。
推測支持的浏覽器：Mozilla 1.5+, Netscape Navigator 7+, Opera 7+
未測試浏覽器：Konqueror
最後附上自己寫的，所有居中(zhōng)布局的範例網頁，大(dà)家不明白(bái)可以參考。
<?<a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a> version="1.0" encoding="utf-8"?>
<!DOCTYPE <a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> PUBLIC "-//W3C//DTD X<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> 1.0 Strict//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>1/DTD/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>1-strict.dtd">
<<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>" <a href="http://www.blue1000.com/bkhtml/c21/" title="XML教程">XML</a>:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>; 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/<a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a>">
<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>,body,div,h1,h2,pre,dd,ol{margin: 0;padding: 0;border: 0}
<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>{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;border: 1px solid #596480;color: inherit;background: #ffc;line-height: 4em;height: 4em;overflow: hidden}
div#demo-2{padding: 50px 0}
div#demo-4, div#demo-5{height: 300px;position: relative}
div#demo-4 div, div#demo-5 div{position: absolute;top: 50%;left: 0}
div#demo-4 p, div#demo-5 p{position: relative;top: -50%}
div#demo-3{display: table;height: 300px;border-collapse: collapse}
div#main-wrapper>div#demo-5{position: static;display:table}
div#main-wrapper>div#demo-5>div{display:table-cell;vertical-align:middle;position:static}
div#demo-3>div{display: table-row}
div#demo-3>div>div{display: table-cell;vertical-align: middle}
span.property{font-family: "Courier New", Courier, monospace, mono, serif;border-bottom: 1px dotted #596480;background: #ffc;color: #c0014e}
p.copyright{line-height: 3em;text-align: center;border-top: 1px dotted #596480}
</style>
</head>
<body>
<div id="main-wrapper">
<h1>Demo of middled vertical align</h1>
<address>
Author: Spenser Lee, Liberty Studio<br />
Originally posted on <a href="http://www.blueidea.com/bbs/" title="BlueIdea Forum">BlueIdea Forum</a>
</address>
<h2><a id="bullet-0">Table of centents:</a></h2>
<ol id="table-of-content">
<li><a href="../../#bullet-1" title="Single line countainer with/without a fixed height">Single line countainer with/without a fixed height</a></li>
<li><a href="../../#bullet-2" title="Align multi-line container which does not have a fixed height">Align multi-line container which does not have a fixed height</a></li>
<li><a href="../../#bullet-3" title="Simulating table layout in container with a fixed height">Simulating table layout in container with a fixed height</a></li>
<li><a href="../../#bullet-4" title="IE's solution">IE's solution</a></li>
<li><a href="../../#bullet-5" title="A perfect compounded sample">A perfect compounded sample</a></li>
</ol>
<h2><a id="bullet-1">Case One: Single line countainer with/without a fixed height</a></h2>
<p>If you only want to display a container which only holds a single line of text, you can set <span class="property">line-height</span> property to <span class="property">height</span> property, then set <span class="property">overflow</span> to hidden.</p>
<p><strong>Sample:</strong></p>
<p id="demo-1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p><strong>Core code:</strong></p>
<pre><code>.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}</code></pre>
<dl>
<dt>Notes:</dt>
<dd>
<ol>
<li>I strongly recommend you use relative size in <span class="property">height</span> and <span class="property">line-height</span> property. <em>Why?</em> You can simply set the font size larger if your browser support it. When it gets large enough, you will see the countainer is stretched and the <span class="property">height</span> is no longer equal to <span class="property">line-height</span> property, thus, the layout is messed up. Using relative size as <span class="property">em, ex</span> or <span class="property">%</span> will let your countainer stretch with the content.</li>
<li><span class="property">overflow: hidden</span> is a must. <em>Why?</em> Same as above. Just ensure <span class="property">height</span> and <span class="property">line-height</span> are always equal.</li>
</ol>
</dd>
</dl>
<dl>
<dt>Pros:</dt>
<dd>
<ol>
<li>Fits in both <span class="property">block</span> elements and <span class="property">inline</span> elements.</li>
<li>Capable of all 5th-gen browsers.</li>
</ol>
</dd>
</dl>
<dl>
<dt>Cons:</dt>
<dd>
<ol>
<li>Text length is limited. Max with only <em>one</em> line.</li>
<li>Does not work well on none text contents such as images and objects.</li>
</ol>
</dd>
</dl>
<p class="snap-back"><a href="../../#bullet-0" title="Back top table of centents">Back</a></p>
<h2><a id="bullet-2">Case Two: Align multi-line container which does not have a fixed height</a></h2>
<p>In this case, we should simply set a pair of fixed equivalences to padding-top and padding-bottom attribute. It works on both IE and non-IE browsers.</p>
<p><strong>Sample:</strong></p>
<div class="demo" id="demo-2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.</p>
</div>
<p><strong>Core code:</strong></p>
<pre><code>.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}</code></pre>
<dl>
<dt>Pros:</dt>
<dd>
<ol>
<li>Fits in both <span class="property">block</span> elements and <span class="property">inline</span> elements.</li>
<li>Works on none text contents as fine as text contents.</li>
<li>Capable of all 5th-gen browsers. Might need a little tune-up for the box model bug of IE5 though.</li>
</ol>
</dd>
</dl>
<dl>
<dt>Cons:</dt>
<dd>
<ol>
<li>You can <em>not</em> assign height in this solution.</li>
</ol>
</dd>
</dl>
<p class="snap-back"><a href="../../#bullet-0" title="Back top table of centents">Back</a></p>
<h2><a id="bullet-3">Case Three: Simulating table layout in container with a fixed height</a></h2>
<p><a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a> offers a set of very convenient display atrribute values called <span class="property">display: table</span>, <span class="property">display: table-row</span>, <span class="property">display: table-cell</span> and other display values begin with <span class="property">table-</span>. It offers a way to simulate table layout in all elements. As a result, any element with <span class="property">display: table-cell</span>, <span class="property">vertical-align: middle</span> and a fixed height will display exactly like a table cell.</p>
<p><strong>Sample:</strong> (You may not be able to view the effect on IE)</p>
<div class="demo" id="demo-3">
<div><div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.</p></div></div>
</div>
<p><strong>Core code:</strong></p>
<pre><code>.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}</code></pre>
<dl>
<dt>Notes:</dt>
<dd>
<ol>
<li><span class="property">display: table-cell</span> must work with other elements with <span class="property">display: table</span> value sets in order to form a literal table. Or it might cause unexceptable bugs.</li>
<li>Sadly IE series (including the latest IE 7 beta) does not support any of <span class="property">display: table</span> values, so it won't work in IE.</li>
</ol>
</dd>
</dl>
<dl>
<dt>Pros:</dt>
<dd>
<ol>
<li>It has the most perfect render for <span class="property">vertical-align: middle</span> align.</li>
</ol>
</dd>
</dl>
<dl>
<dt>Cons:</dt>
<dd>
<ol>
<li>It only works in latest versions of non-IE browsers, such as Mozilla, Firefox, Netscape 8, Opera 8, and Safari.</li>
</ol>
</dd>
</dl>
<p class="snap-back"><a href="../../#bullet-0" title="Back top table of centents">Back</a></p>
<h2><a id="bullet-4">Case Four: IE's solution</a></h2>
<p>Since IE is a lame browser when it comes to ANYTHING, so you can't use the solution above simply because IE does not recognize it at all. However, <strong>there has been nothing yet you can not code with <a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a> if you have already coded it with table</strong>. It even offers you possibility to layout your page that tables can not do!</p>
<p>So what's the solution for IE? Like what we always do: Hit IE's back with the BUGS it offers!</p>
<p><strong>Sample:</strong> (You are able to view the correct result only on IE)</p>
<div class="demo" id="demo-4">
<div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.</p></div>
</div>
<pre><code>.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;
}</code></pre>
<p>See? Don't ask me why it worked. This hack is based on years of study in IE's own stupid layout model and it works very well, even in IE5 given the box width hack. I won't tell you the theory behind all these. It's my top secret, with which I solved a lot of other cross browser layout problems, and I'm not going to share it with you. But you are free to use this IE hack It's kinda handful in most occassions.</p>
<dl>
<dt>Pros:</dt>
<dd>
<ol>
<li>The only perfect vertical align method in IE. It works even better then add automatic <span class="property">padding</span>s.</li>
</ol>
</dd>
</dl>
<dl>
<dt>Cons:</dt>
<dd>
<ol>
<li>After all it's a <a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a> hack. We can avoid it if not for IE.</li>
</ol>
</dd>
</dl>
<p class="snap-back"><a href="../../#bullet-0" title="Back top table of centents">Back</a></p>
<h2><a id="bullet-5">Case Five: A perfect compounded sample</a></h2>
<p>Here's the perfect compounded solution on vertical centering that works on almost all latest browsers.</p>
<p><strong>Sample:</strong> (This works on almost all browsers)</p>
<div class="demo" id="demo-5">
<div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.</p></div>
</div>
<p>I'm not going to give you the full code of this one. But it's not difficult to write it yourself, with the solution of case 3 and 4, and a little knowledge in IE/non-IE <a href="http://www.blue1000.com/bkhtml/c23/" title="CSS教程">CSS</a> hackers. And actually the hacking style is not limited, so I don't want to force you to use my hacking style neither. Stop being lazy, and write the code yourself!</p>
<dl>
<dt>Browser capability:</dt>
<dd>
<ol>
<li>Works on: IE6+, Mozilla 1.5+, Netscape Navigator 7+, Opera 7+, Firefox 1.0+ and Safari 1.0+</li>
<li>On IE5, you might need to apply the box model hacker to make the height correct.</li>
<li>Untested: WebOmini, Konqueror.</li>
<li>Fails on: Other browsers not reffered in the list above.</li>
</ol>
</dd>
</dl>
<p class="snap-back"><a href="../../#bullet-0" title="Back top table of centents">Back</a></p>
<p class="copyright">Copyright © Spenser Lee, 2006 Liberty Studio</p>
</div>
</body>
</<a href="http://www.blue1000.com/bkhtml/c22/" title="HTML/JavaScript教程">HTML</a>>
[Ctrl+A 全部選擇 提示：你可先修改部分(fēn)代碼，再按運行]
文章來源：http://www.blue1000.com/bkhtml/2006-03/44303.htm
475003427