CSS網(wǎng)頁布局:div垂直居中的各種方法
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:24:18 作者:佚名
我要評論

在前面的文章中我簡單總結(jié)了一個“CSS在頁面布局中實(shí)現(xiàn)div水平居中的方法”,其實(shí)水平居中實(shí)現(xiàn)還是比較簡單的,反而垂直居中有點(diǎn)麻煩,因?yàn)槲覀冊O(shè)計(jì)頁面的時(shí)候往往水平寬度都是固定的。因此我們有必要總結(jié)一下在頁面布局過程中實(shí)現(xiàn)垂直居中的方法。
在說到這
在前面的文章中我簡單總結(jié)了一個“CSS在頁面布局中實(shí)現(xiàn)div水平居中的方法”,其實(shí)水平居中實(shí)現(xiàn)還是比較簡單的,反而垂直居中有點(diǎn)麻煩,因?yàn)槲覀冊O(shè)計(jì)頁面的時(shí)候往往水平寬度都是固定的。因此我們有必要總結(jié)一下在頁面布局過程中實(shí)現(xiàn)垂直居中的方法。
在說到這個問題的時(shí)候,也許有人會問CSS中不是有vertical-align屬性來設(shè)置垂直居中的嗎?即使是某些瀏覽器不支持我只需做少許的CSS Hack技術(shù)就可以?。∷栽谶@里我還要啰嗦兩句,CSS中的確是有vertical-align屬性,但是它只對(X)HTML元素中擁有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>這樣的元素是沒有valign特性的,因此使用vertical-align對它們不起作用。 一、單行垂直居中
如果一個容器中只有一行文字,對它實(shí)現(xiàn)居中相對比較簡單,我們只需要設(shè)置它的實(shí)際高度height和所在行的高度line-height相等即可。如:
div {
height:25px;
line-height:25px;
overflow:hidden;
}
這段代碼很簡,后面使用overflow:hidden的設(shè)置是為了防止內(nèi)容超出容器或者產(chǎn)生自動換行,這樣就達(dá)不到垂直居中效果了。更多CSS教程。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 單行文字實(shí)現(xiàn)垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>現(xiàn)在我們要使這段文字垂直居中顯示!</div>
</body>
</html>
不過在Internet Explorer 6及以下版本中,這和方法不支持對圖片設(shè)置垂直居中。 二、多行未知高度文字的垂直居中
如果一段內(nèi)容,它的高度是可變的那么我們就可以使用上一節(jié)講到的實(shí)現(xiàn)水平居中時(shí)使用到的最后一種方法,就是設(shè)定Padding,使上下的padding值相同即可。同樣的,這也是一種“看起來”的垂直居中方式,它只不過是使文字把<div>完全填充的一種訪求而已??梢允褂妙愃葡旅娴拇a:
div {
padding:25px;
}
這種方法的優(yōu)點(diǎn)就是它可以在任何瀏覽器上運(yùn)行,并且代碼很簡單,只不過這種方法應(yīng)用的前提就是容器的高度必須是可伸縮的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字實(shí)現(xiàn)垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div><pre>現(xiàn)在我們要使這段文字垂直居中顯示!
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</pre></div>
</body>
</html> 三、多行文本固定高度的居中
在本文的一開始,我們已經(jīng)說過CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標(biāo)簽起作用,但是在CSS中還有一個display屬性能夠模擬<table>,所以我們可以使用這個屬性來讓<div>模擬<table>就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必須設(shè)置在父元素上,后者必須設(shè)置在子元素上,因此我們要為需要定位的文本再增加一個<div>元素:
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字實(shí)現(xiàn)垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content"><pre>現(xiàn)在我們要使這段文字垂直居中顯示!
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</pre></div>
</div>
</body>
</html>
這個方法應(yīng)該是很理想了,但是不幸的是Internet Explorer 6 并不能正確地理解display:table和display:table-cell,因此這種方法在Internet Explorer 6及以下的版本中是無效的。嗯,這讓人很郁悶!不過我們還其它的辦法。 四、在Internet Explorer中的解決方案
在Internet Explorer 6及以下版本中,在高度的計(jì)算上存在著缺陷的。在Internet Explorer 6中對父元素進(jìn)行定位后,如果再對子元素進(jìn)行百分比計(jì)算時(shí),計(jì)算的基礎(chǔ)似乎是有繼承性的(如果定位的數(shù)值是絕對數(shù)值沒有這個問題,但是使用百分比計(jì)算的基礎(chǔ)將不再是該元素的高度,而從父元素繼承來的定位高度)。例如,我們有下面這樣一個(X)HTML代碼段:
<div id="wrap">
<div id="subwrap">
<div id="content">
</div>
</div>
</div>
如果我們對subwrap進(jìn)行了絕對定位,那么content也會繼承了這個這個屬性,雖然它不會在頁面中馬上顯示出來,但是如果再對content進(jìn)行相對定位的時(shí)候,你使用的100%分比將不再是content原有的高度。例如,我們設(shè)定了subwrap的position為40%,我們?nèi)绻胧筩ontent的上邊緣和wrap重合的話就必須設(shè)置top:-80%;那么,如果我們設(shè)定subwrap的top:50%的話,我們必須使用100%才能使content回到原來的位置上去,但是如果我們把content也設(shè)置50%呢?那么它就正好垂直居中了。所以我們可以使用這中方法來實(shí)現(xiàn)Internet Explorer 6中的垂直居中: div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
當(dāng)然,這段代碼只能在Internet Exlporer 6等計(jì)算存在問題的瀏覽器中才會有作用。(不過我不解,我查閱了很多文章,不知道是因?yàn)槌鎏幭嗤€是什么原因,似乎很多人都不愿意去解釋Internet Exlporer 6中這這個Bug的原理,我也只是了解了一點(diǎn)皮毛,還要再研究)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字實(shí)現(xiàn)垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
top:50%;
}
div#content {
position:relative;
top:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>現(xiàn)在我們要使這段文字垂直居中顯示!
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}</pre>
</div>
</div>
</div>
</body>
</html>
五、完美的解決方案
那么我們綜合上面兩種方法就可以得到一個完美的解決方案,不過這要用到CSS hack的知識。對于如果使用CSS Hack來區(qū)分瀏覽器,你可以參考這篇“簡單CSS hack:區(qū)分IE6、IE7、IE8、Firefox、Opera”: div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
至此,一個完美的居中方案就產(chǎn)生了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字實(shí)現(xiàn)垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>現(xiàn)在我們要使這段文字垂直居中顯示!
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}</pre>
</div>
</div>
</div>
</body>
</html>
p.s. 垂直居中vertical-align的值是middle,而水平居中align的值是center,雖然同是居中但關(guān)鍵字不同。
相關(guān)文章
- 本文主要介紹了css九宮格布局的五種方法,內(nèi)容包括grid布局、flex布局、table布局、float浮動定位、inline-block+letter-spacing屬性這五種方法的實(shí)現(xiàn),感興趣的可以了解下2023-09-18
- 在Web開發(fā)中,經(jīng)常會遇到需要將元素水平和垂直居中的情況,今天,將為大家分享幾種CSS方法,讓你的元素輕松居中,讓頁面更美觀吸引人,感興趣的小伙伴可以自己動手試一試2023-09-08
- 相信大家在面試的時(shí)候也會經(jīng)常碰到css實(shí)現(xiàn)元素居中的方法,下面我介紹6種方法給大家,歡迎大家評論區(qū)交流2023-09-07
flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐
最近需要做個換行的布局,本文主要介紹了flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需2022-06-16CSS布局之浮動(float)和定位(position)屬性的區(qū)別
今天看到有朋友留言問浮動和定位有什么區(qū)別,如何使用?今天找了篇文章,講的比較通俗易懂,供大家參考2021-09-23- 這篇文章主要介紹了css實(shí)現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
- 這篇文章主要介紹了div水平布局兩邊對齊的三種實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起2021-01-21
waterfall瀑布流布局+動態(tài)渲染的實(shí)現(xiàn)
這篇文章主要介紹了waterfall瀑布流布局+動態(tài)渲染的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起2021-01-19頁面中有間隔的方格布局如何完美實(shí)現(xiàn)方法
這篇文章主要介紹了頁面中有間隔的方格布局如何完美實(shí)現(xiàn)方法。文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來2020-11-27css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式
這篇文章主要介紹了css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-10-28