CSS垂直居中網(wǎng)頁(yè)布局實(shí)現的5種方法
利用 CSS 來(lái)實(shí)現對象的垂直居中有許多不同的方法,比較難的是選擇那個(gè)正確的方法ID嵌套樣式問(wèn)題。我下面說(shuō)明一下我看到的好的方法和怎么來(lái)創(chuàng )建一個(gè)好的居中網(wǎng)站。
使用 CSS 實(shí)現垂直居中并不容易ID嵌套樣式問(wèn)題。有些方法在一些瀏覽器中無(wú)效。下面我們看一下使對象垂直集中的5種不同方法,以及它們各自的優(yōu)缺點(diǎn)。(可以看看 測試頁(yè)面 ,有簡(jiǎn)短解釋。)
方法一
021yin.com /viewthread.php?tid=377041
這個(gè)方法把一些 div 的顯示方式設置為表格,因此我們可以使用表格的 vertical-align property 屬性ID嵌套樣式問(wèn)題。
div id="wrapper"
div id="cell"
div class="content"
Content goes here/div
/div
/div
上海wrapper {display:table;}
河津市cell {display:table-cell; vertical-align:middle;}
優(yōu)點(diǎn):
content 可以動(dòng)態(tài)改變高度(不需在 CSS 中定義)ID嵌套樣式問(wèn)題。當 wrapper 里沒(méi)有足夠空間時(shí), content 不會(huì )被截斷
缺點(diǎn):
Internet Explorer(甚至 IE8 beta)中無(wú)效ID嵌套樣式問(wèn)題,許多嵌套標簽(其實(shí)沒(méi)那么糟糕,另一個(gè)專(zhuān)題)
方法二:
這個(gè)方法使用絕對定位的 div,把它的 top 設置為 50%,top margin 設置為負的 content 高度ID嵌套樣式問(wèn)題。這意味著(zhù)對象必須在 CSS 中指定固定的高度。
因為有固定高度,或許你想給 content 指定 overflow:auto,這樣如果 content 太多的話(huà),就會(huì )出現滾動(dòng)條,以免content 溢出ID嵌套樣式問(wèn)題。
div class="content"
Content goes here/div
繁峙縣content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
優(yōu)點(diǎn):
適用于所有瀏覽器
不需要嵌套標簽
缺點(diǎn):
沒(méi)有足夠空間時(shí)ID嵌套樣式問(wèn)題,content 會(huì )消失(類(lèi)似div 在 body 內,當用戶(hù)縮小瀏覽器窗口,滾動(dòng)條不出現的情況)
方法三
這種方法,在 content 元素外插入一個(gè) divID嵌套樣式問(wèn)題。設置此 div height:50%; margin-bottom:-contentheight;。
content 清除浮動(dòng),并顯示在中間ID嵌套樣式問(wèn)題。
div id="floater"
div id="content"
Content here/div
/div
懷柔縣floater {float:left; height:50%; margin-bottom:-120px;}
天津市content {clear:both; height:240px; position:relative;}
優(yōu)點(diǎn):
適用于所有瀏覽器
沒(méi)有足夠空間時(shí)(例如:窗口縮小) content 不會(huì )被截斷ID嵌套樣式問(wèn)題,滾動(dòng)條出現
缺點(diǎn):
唯一我能想到的就是需要額外的空元素了(也沒(méi)那么糟ID嵌套樣式問(wèn)題,又是另外一個(gè)話(huà)題)
方法四
這個(gè)方法使用了一個(gè) position:absolute,有固定寬度和高度的 divID嵌套樣式問(wèn)題。這個(gè) div 被設置為 top:0; bottom:0;。但是因為它有固定高度,其實(shí)并不能和上下都間距為 0,因此 margin:auto; 會(huì )使它居中。使用 margin:auto;使塊級元素垂直居中是很簡(jiǎn)單的。
div id="content"
Content here/div
昌平區content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
優(yōu)點(diǎn):簡(jiǎn)單
缺點(diǎn):
IE(IE8 beta)中無(wú)效
無(wú)足夠空間時(shí)ID嵌套樣式問(wèn)題,content 被截斷,但是不會(huì )有滾動(dòng)條出現
方法五
這個(gè)方法只能將單行文本置中ID嵌套樣式問(wèn)題。只需要簡(jiǎn)單地把 line-height 設置為那個(gè)對象的 height 值就可以使文本居中了。
div id="content"
Content here/div
杭州content {height:100px; line-height:100px;}
優(yōu)點(diǎn):
適用于所有瀏覽器
無(wú)足夠空間時(shí)不會(huì )被截斷
缺點(diǎn):
只對文本有效(塊級元素無(wú)效)
多行時(shí)ID嵌套樣式問(wèn)題,斷詞比較糟糕
這個(gè)方法在小元素上非常有用,例如使按鈕文本或者單行文本居中ID嵌套樣式問(wèn)題。
哪個(gè)方法ID嵌套樣式問(wèn)題?
我最喜歡的是方法三,缺點(diǎn)不多ID嵌套樣式問(wèn)題。因為 content 會(huì )清除浮動(dòng),所以可以在它上面放置別的元素,并且當窗口縮放時(shí),
居中的 content 不會(huì )把另外的元素蓋住ID嵌套樣式問(wèn)題。看 例子。
div id="top"
h1Title/h1
/div
div id="content"
Content Here/div
右玉縣floater {float:left; height:50%; margin-bottom:-120px;}
和順縣top {float:right; width:100%; text-align:center;}
寧武縣content {clear:both; height:240px; position:relative;}
現在你知道是怎么回事了,現在我們開(kāi)始創(chuàng )建一個(gè)簡(jiǎn)單但是有趣的網(wǎng)站ID嵌套樣式問(wèn)題。最終的樣子是這樣的:
步驟一
以語(yǔ)義化標簽開(kāi)始是很好的ID嵌套樣式問(wèn)題。下面是我們的頁(yè)面構成:
文水縣floater/*把 content 置中*/
霍州市contred/*centre 盒*/
鄉寧縣side
恒曲縣logo
杭州nav/*無(wú)序列表*/
南寧content
西城區bottom/*放置版權等*/
這是我用到的 xhtml 代碼:
A Centred Company
div id="centered"
div id="side"
div id="logo"
strongspanA/span Company/strong/div
ul id="nav"
lia href="昌平區"Home/a/li
lia href="左權縣"Products/a/li
lia href="萬(wàn)榮縣"Blog/a/li
lia href="寧武縣"Contact/a/li
lia href="盂縣"About/a/li
/ul
/div
div id="content"
h1Page Title/h1
Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing.
Energistically simplify impactful niche markets via enabled imperatives.
Holisticly predominate premium innovation after compelling scenarios.
Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products.
Distinctively syndicate standards compliant schemas before robust vortals.
Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information.
h2Heading 2/h2
Efficiently embrace customized web-readiness rather than customer directed processes.
Assertively grow cross-platform imperatives vis-a-vis proactive technologies.
Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces.
Conveniently streamline competitive strategic theme areas with focused e-markets.
Phosfluorescently syndicate world-class communities vis-a-vis value-added markets.
Appropriately reinvent holistic services before robust e-services./div
/div
div id="bottom"
Copyright notice goes here/div
步驟二:
現在我們開(kāi)始用一些基本的 CSS 來(lái)給頁(yè)面添加樣式ID嵌套樣式問(wèn)題。把以下代碼放入在我們的 html 頁(yè)面頂部被引入的 style.css。
html, body {
margin:0; padding:0;
height:100%;
body {
background:url('page_bg.jpg') 50% 50% no-repeat 絳縣FC3;
font-family:Georgia, Times, serifs;
徐州floater {
position:relative; float:left;
height:50%; margin-bottom:-200px;
width:1px;
泰安centered {
position:relative; clear:left;
height:400px; width:80%; max-width:800px; min-width:400px;
margin:0 auto;
background:崇文區fff;
border:4px solid 大興縣666;
河北區bottom {
position:absolute;
bottom:0; right:0;
寧河縣nav {
position:absolute; left:0; top:0; bottom:0; right:70%;
padding:20px; margin:10px;
盂縣content {
position:absolute; left:30%; right:0; top:0; bottom:0;
overflow:auto; height:340px;
padding:20px; margin:10px;
在我們能夠把 content 垂直居中之前, body 和 html 應該被拉伸到 100% 的高度ID嵌套樣式問(wèn)題。由于 height在 padding 和 margin 之內,所以我們要把它們設成 0 以防止因為很小的 margin 出現滾動(dòng)條。
floater 的 margin-bottom 是 content 高度(400px)的一半,-200pxID嵌套樣式問(wèn)題。
現在可以看到一下效果:
沁縣centred 的寬度為 80%ID嵌套樣式問(wèn)題。這可以市網(wǎng)頁(yè)隨著(zhù)顯示器的大小而變化。一般稱(chēng)作流體布局。設置 min-width 和max-width 以避免網(wǎng)頁(yè)過(guò)大或者過(guò)小。 但是 IE 不支持 min/max-width。顯然可以用固定寬度來(lái)代替。
因為 應縣centred 是相對定位的,在它里面我們可以用絕對定位來(lái)定位元素ID嵌套樣式問(wèn)題。設置 平遙縣content 的 overflow:auto;以避免滾動(dòng)條的出現。IE 不怎么喜歡 overflow:auto; 除非我們指定高度(不是 top 和 bottom 的定位,也不是 %)因此我們給它指定高度。
步驟三
最后要做的就是再添加點(diǎn)樣式,讓頁(yè)面好看點(diǎn)ID嵌套樣式問(wèn)題。從目錄開(kāi)始吧。
靜樂(lè )縣nav ul {
list-style:none;
padding:0; margin:20px 0 0 0; text-indent:0;
中陽(yáng)縣nav li {
padding:0; margin:3px;
呵呵nav li a {
display:block; background-color:武鄉縣e8e8e8;
padding:7px; margin:0;
text-decoration:none; color:東城區000;
border-bottom:1px solid 廣靈縣bbb;
text-align:right;
臨縣nav li a::after {
content:'?'; color:陵川縣aaa; font-weight:bold;
display:inline; float:right;
margin:0 2px 0 5px;
絳縣nav li a:hover, 中陽(yáng)縣nav li a:focus {
background:河北區f8f8f8;
border-bottom-color:寧河縣777;
盂縣nav li a:hover::after {
margin:0 0 0 7px; color:沁縣f93;
應縣nav li a:active {
padding:8px 7px 6px 7px;
需要注意的是 平遙縣centred 的圓角ID嵌套樣式問(wèn)題。 CSS3 中,應該有 border-radius 屬性來(lái)設定圓角的半徑(可參考 CSS3之旅: border-radius(圓角) - 糖伴西紅柿)。現在的流行的瀏覽器都還不支持,除非用 -moz(Molilla Firefox) 或者 -webit(Safari/Webkit) 前綴.
兼容性注意事項
如你所想,IE 是唯一添麻煩的瀏覽器ID嵌套樣式問(wèn)題。
靜樂(lè )縣floater 必須指定寬度ID嵌套樣式問(wèn)題,否則在任意版本 IE 中,它都啥也不干
IE 6 中目錄被周?chē)嗟目臻g打斷
IE 8 有多余空間(作者遺漏)
更多的想法
利用居中的網(wǎng)頁(yè)可以做很多有意思的事情ID嵌套樣式問(wèn)題。我在重新設計 SWFObject Generator 2.0 (使用 SWFObject2.0 生成代碼)使用了這個(gè)想法。這里有另外的一個(gè)想法。
資料
以下是我參考的一些資料,推薦閱讀ID嵌套樣式問(wèn)題。
Understanding vertical-align, or “How (Not) To Vertically Center Content”
Vertical centering using CSS
Vertical Centering in CSS
糖伴西紅柿說(shuō):
水平居中經(jīng)常用,其實(shí)垂直居中也很有用的ID嵌套樣式問(wèn)題。平時(shí)用的最多的應該是方法五了,算是個(gè)小技巧吧
021yin.com yumi 54