|
英文原文：
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
中文譯文：
http://www.12sui.cn/blog/71.html
本人英語還沒過四級，所以不能說是翻譯把，只能說是按照自己的理解去敘述了一遍作者的意思，請各位多多指教。
譯文內(nèi)容：
當你發(fā)覺你曾經(jīng)以為的事實其實并不是那樣，你會感覺很開心。
舊的方法
經(jīng)常做的第一件事通常是如何在 CSS 中控制元素水平或者垂直方向上居中，相信這也是很多設(shè)計師喜歡做的事情。首先，我們采用絕對定位的方法讓元素離開頂部和左部 50% 的距離，然后我們需要設(shè)置一個負的 margin 來將元素拉回到中間的位置。
現(xià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è)置了一個背景圖片，僅僅是為了讓它看起來更舒服一些，而我們真正需要注意的部分是中間那部分灰色的區(qū)域。
如你看到的那樣，現(xiàn)在的結(jié)果正如我們想象的那樣，那部分元素在水平和垂直的方向上完美的處在了中間的位置。這是按照我們最初提起的那種方式實現(xiàn)的，首先讓元素在水平和垂直方向上離開 50% 的距離，然后設(shè)置負的 margin 讓它回到中間的位置。
盡管表面上看來，現(xiàn)在的方法已經(jīng)有效的達到了我們預期的目標，但是，同時也產(chǎn)生了嚴重的負面影響。當一個人將瀏覽器窗口變小，或者使用一個低分辨率的電腦時，那么居中的那部分元素的上部和左部將消失，即使通過滾輪的滑動，也無法看到。
當我們將窗口變小，就會看到如下圖那樣的情況：
文字的頂部和左部已經(jīng)消失，而且，隨著我們?yōu)g覽器窗口的不斷縮小，這段文字將最終離開我們的視線。為了彌補這些負的數(shù)值，我們?yōu)?body 設(shè)置了 min-width 和 min-height，但是你可以看到，這根本沒有起到任何效果，那段文字依然停留在我們視線以外的地方。
出處：藍色理想
責任編輯：bluehearts
上一頁 下一頁 簡單的通過CSS控制垂直居中 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 簡單的通過CSS控制垂直居中 [1]
第 2 頁 
