英文原文：
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
中文譯文：
http://www.12sui.cn/blog/71.html
本人英語(yǔ)還沒(méi)過(guò)四級(jí)，所以不能說(shuō)是翻譯把，只能說(shuō)是按照自己的理解去敘述了一遍作者的意思，請(qǐng)各位多多指教。
譯文內(nèi)容：
當(dāng)你發(fā)覺(jué)你曾經(jīng)以為的事實(shí)其實(shí)并不是那樣，你會(huì)感覺(jué)很開(kāi)心。
舊的方法
經(jīng)常做的第一件事通常是如何在 CSS 中控制元素水平或者垂直方向上居中，相信這也是很多設(shè)計(jì)師喜歡做的事情。首先，我們采用絕對(duì)定位的方法讓元素離開(kāi)頂部和左部 50% 的距離，然后我們需要設(shè)置一個(gè)負(fù)的 margin 來(lái)將元素拉回到中間的位置。
現(xiàn)在讓我們來(lái)看一下這種方法的代碼以及它所帶來(lái)的問(wèn)題：
CSS 代碼：
html,body{
height:100%;
margin:0;
padding:0;
}
body{
background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
text-align:center;
min-width:626px;
min-height:400px;
}
#vert-hoz{
position:absolute;
top:50%;
left:50%;
margin-top:-198px;/* half elements height*/
margin-left:-313px;/* half elements width*/
width:624px;
height:394px;
border:1px solid silver;
background:#666;
overflow:auto;/* allow content to scroll inside element */
text-align:left;
}
h1 {color:#fff;margin:0;padding:0}
HTML 代碼：
<div id="vert-hoz">
<h1>Content goes here</h1>
</div>
你可以在 這里 看到這段代碼的展示。

我為它設(shè)置了一個(gè)背景圖片，僅僅是為了讓它看起來(lái)更舒服一些，而我們真正需要注意的部分是中間那部分灰色的區(qū)域。
如你看到的那樣，現(xiàn)在的結(jié)果正如我們想象的那樣，那部分元素在水平和垂直的方向上完美的處在了中間的位置。這是按照我們最初提起的那種方式實(shí)現(xiàn)的，首先讓元素在水平和垂直方向上離開(kāi) 50% 的距離，然后設(shè)置負(fù)的 margin 讓它回到中間的位置。
盡管表面上看來(lái)，現(xiàn)在的方法已經(jīng)有效的達(dá)到了我們預(yù)期的目標(biāo)，但是，同時(shí)也產(chǎn)生了嚴(yán)重的負(fù)面影響。當(dāng)一個(gè)人將瀏覽器窗口變小，或者使用一個(gè)低分辨率的電腦時(shí)，那么居中的那部分元素的上部和左部將消失，即使通過(guò)滾輪的滑動(dòng)，也無(wú)法看到。
當(dāng)我們將窗口變小，就會(huì)看到如下圖那樣的情況：

文字的頂部和左部已經(jīng)消失，而且，隨著我們?yōu)g覽器窗口的不斷縮小，這段文字將最終離開(kāi)我們的視線。為了彌補(bǔ)這些負(fù)的數(shù)值，我們?yōu)?body 設(shè)置了 min-width 和 min-height，但是你可以看到，這根本沒(méi)有起到任何效果，那段文字依然停留在我們視線以外的地方。
#p#
改進(jìn)的方法
針對(duì)這些問(wèn)題的另一個(gè)類似的版本是讓元素依然保持垂直方向上的定位方式，但是水平方向上設(shè)置 margin 為 auto 以達(dá)到我們的目的。這樣子消除了文字在水平方向上的問(wèn)題。請(qǐng)看改進(jìn)的代碼。
CSS 代碼：
html,body{
height:100%;
margin:0;
padding:0;
}
body{
background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
text-align:center;
min-width:626px;
min-height:400px;
}
#vertical{
position:absolute;
top:50%;
margin-top:-198px;/* half main elements height*/
left:0;
width:100%;
}
#hoz {
width:624px;
margin-left:auto;
margin-right:auto;
height:394px;
border:1px solid silver;
background:#666;
overflow:auto;/* allow content to scroll inside element */
text-align:left;
}
h1 {color:#fff;margin:0;padding:0}
HTML 代碼：
<div id="vertical">
<div id="hoz">
<h1>Content goes here</h1>
</div>
</div>
你可以在 這里 看到實(shí)際的頁(yè)面效果。
這樣子達(dá)到了我們預(yù)期的一部分效果，但是在垂直方向上依然存在著問(wèn)題，你可以在下圖中看到：

#p#
最終的版本
現(xiàn)在回到這個(gè)問(wèn)題，我曾經(jīng)用了一些 很復(fù)雜的方法 去解決，但是現(xiàn)在又一個(gè)更簡(jiǎn)單、穩(wěn)健的方法，那就是用浮動(dòng)去代替絕對(duì)定位。
我們?cè)O(shè)定頁(yè)面上的第一個(gè)元素的高度為頁(yè)面的 50%，然后將這個(gè)元素向上拉，所拉的距離等于我們要設(shè)定居中的元素的高度的一半。
這里是我們做出的修正：
CSS 代碼：
#vertical{
float:left;
height:50%;
margin-top:-198px;/* half vertical height*/
width:100%;
}
HTML 代碼：
<div id="vertical"></div>
<div id="hoz">
<h1>Content goes here</h1>
</div>
你可以在 這里 看到所展示的效果。

這里很重要的一部分就是我們使用了一個(gè)寬度為100%的 float 元素，當(dāng)然我們要記得為它的下一個(gè)元素添加 clear:both; ,否則，一些瀏覽器將不能理解你的意思。如果這里我們不使用 float，那么文字依然會(huì)消失在我們的視線之外。
#p#
這是為什么
這里引發(fā)了一個(gè)關(guān)于 float 的有趣的行為，也正好去去好好的了解一下它。那么為什么當(dāng)我們使用一個(gè)絕對(duì)的元素它會(huì)消失，而使用浮動(dòng)卻不會(huì)產(chǎn)生這樣的后果呢？
浮動(dòng)的本質(zhì)就是流動(dòng)，即使你可以通過(guò)下一個(gè)元素的 clear 重新控制它。位于浮動(dòng)之后的元素為浮動(dòng)騰出了空間（瀏覽器通常是為絕對(duì)元素增加上邊距以清除浮動(dòng)）。一旦浮動(dòng)元素不在了，絕對(duì)元素將回到這個(gè)頁(yè)面的正常位置。因此當(dāng)我們?yōu)楦?dòng)元素設(shè)置一個(gè)負(fù)的 margin 之后，它將克服任何的阻礙去移動(dòng)，因?yàn)樗旧砭褪腔诹鲃?dòng)的。當(dāng)我們逐漸的移動(dòng)浮動(dòng)元素，一直到它消失在外邊界里，那么緊跟它的絕對(duì)元素將回到頁(yè)面中的正常位置，而不會(huì)跟隨浮動(dòng)元素消失。
這是一個(gè)事實(shí)，當(dāng)浮動(dòng)元素不斷的往上拉，直到消失，我們的絕對(duì)元素依然留在我們的視野之中。這可能有些難理解，但是我們可以通過(guò)一個(gè)簡(jiǎn)單的例子去了解它。
CSS 代碼：
.float{
width:200px;
height:100px;
background:red;
float:left;
}
.top{
background:green;
height:300px;
width:100%;
}
.follow-on{
clear:both;
background:blue;
height:100px
}
HTML 代碼:
<div class="top">Top</div>
<div class="float">Float</div>
<div class="follow-on">Following content</div>
這里我們先在上邊設(shè)定了一個(gè)絕對(duì)元素，然后設(shè)置了一個(gè)浮動(dòng)元素，再在浮動(dòng)元素下設(shè)置了一個(gè)絕對(duì)元素。請(qǐng)看下圖，或者看 這個(gè)頁(yè)面 的效果。

沒(méi)有什么異常，一切都是我們所預(yù)料的那樣。
現(xiàn)在，如果我們?yōu)楦?dòng)元素添加一個(gè)負(fù)的 margin：
.float{
width:200px;
height:100px;
background:red;
float:left;
margin-top:-100px
}
那么我們可以看到下圖的效果，或者到 這里 查看效果。

依然一切正常，如我們所預(yù)料的，但是如果我們把負(fù)的數(shù)值調(diào)整為 200 呢？
.float{
width:200px;
height:100px;
background:red;
float:left;
margin-top:-200px
}
如下圖，或者點(diǎn)擊 這里 查看效果。

正如你看到的那樣，浮動(dòng)元素離開(kāi)了它下邊的元素，但是浮動(dòng)下邊的元素并沒(méi)有跟隨浮動(dòng)，而是留在了本來(lái)屬于它的位置。這很好的解釋了我們最初的例子中將浮動(dòng)元素拉離視野所出現(xiàn)的狀況。
然而，加入我們將紅色浮動(dòng)元素的 float 屬性刪除，那么藍(lán)色的元素將跟隨它一起被拉入綠色元素的區(qū)域。如下圖所示，或者在 這里 查看效果。

當(dāng)一個(gè)絕對(duì)元素的邊距 margin 發(fā)生變化時(shí)，所有它后邊的絕對(duì)元素的也將發(fā)生相應(yīng)的改變。
我希望各位會(huì)對(duì)這個(gè)小技巧（雖然可能你已經(jīng)知道）感興趣，也希望你們能和我一起分享你們經(jīng)常遇到的問(wèn)題。關(guān)于這個(gè)小技巧的完整代碼很容易得到，你可以輕松獲得。
如果你想了解更多的關(guān)于居中的方法，可以來(lái)看看 這里。

最新評(píng)論