CSS教程之div垂直居中的多種方法

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)頁制作

CSS教程之div垂直居中的多種方法

來源：易賢網(wǎng) 閱讀：1033 次日期：2016-05-12 10:29:48

溫馨提示：易賢網(wǎng)小編為您整理了“CSS教程之div垂直居中的多種方法”,方便廣大網(wǎng)友查閱！

在說到這個問題的時候，也許有人會問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相等即可。

如：

CSS Code

div {

height:25px;

line-height:25px;

overflow:hidden;

}

這段代碼很簡，后面使用overflow:hidden的設(shè)置是為了防止內(nèi)容超出容器或者產(chǎn)生自動換行，這樣就達(dá)不到垂直居中效果了。

XML/HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> 單行文字實(shí)現(xiàn)垂直居中 </title>

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>

二、多行未知高度文字的垂直居中

如果一段內(nèi)容，它的高度是可變的那么我們就可以使用上一節(jié)講到的實(shí)現(xiàn)水平居中時使用到的最后一種方法，就是設(shè)定Padding，使上下的padding值相同即可。同樣的，這也是一種“看起來”的垂直居中方式，它只不過是使文字把<div>完全填充的一種訪求而已?？梢允褂妙愃葡旅娴拇a：

CSS Code

div {

padding:25px;

}

這種方法的優(yōu)點(diǎn)就是它可以在任何瀏覽器上運(yùn)行，并且代碼很簡單，只不過這種方法應(yīng)用的前提就是容器的高度必須是可伸縮的。

XML/HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> 多行文字實(shí)現(xiàn)垂直居中 </title>

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>元素：

CSS Code

div#wrap {

height:400px;

display:table;

}

div#content {

vertical-align:middle;

display:table-cell;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

}

XML/HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> 多行文字實(shí)現(xiàn)垂直居中 </title>

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="content"><pre>現(xiàn)在我們要使這段文字垂直居中顯示！ Webjx.Com

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及以下版本中，在高度的計算上存在著缺陷的。在Internet Explorer 6中對父元素進(jìn)行定位后，如果再對子元素進(jìn)行百分比計算時，計算的基礎(chǔ)似乎是有繼承性的（如果定位的數(shù)值是絕對數(shù)值沒有這個問題，但是使用百分比計算的基礎(chǔ)將不再是該元素的高度，而從父元素繼承來的定位高度）。例如，我們有下面這樣一個(X)HTML代碼段：

CSS Code

</div>

如果我們對subwrap進(jìn)行了絕對定位，那么content也會繼承了這個這個屬性，雖然它不會在頁面中馬上顯示出來，但是如果再對content進(jìn)行相對定位的時候，你使用的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中的垂直居中：

CSS Code

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等計算存在問題的瀏覽器中才會有作用。（不過我不解，我查閱了很多文章，不知道是因?yàn)槌鎏幭嗤€是什么原因，似乎很多人都不愿意去解釋Internet Exlporer 6中這這個Bug的原理，我也只是了解了一點(diǎn)皮毛，還要再研究）

XML/HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> 多行文字實(shí)現(xiàn)垂直居中 </title>

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="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>

</body>

</html>

五、完美的解決方案

那么我們綜合上面兩種方法就可以得到一個完美的解決方案，不過這要用到CSS hack的知識。對于如果使用CSS Hack來區(qū)分瀏覽器，你可

以參考這篇“簡單CSS hack：區(qū)分IE6、IE7、IE8、Firefox、Opera”：

CSS Code

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)生了。

XML/HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> 多行文字實(shí)現(xiàn)垂直居中 </title>

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="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>

</body>

</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

更多信息請查看網(wǎng)頁制作

上一篇：記住CSS中的10個“不要”

下一篇：知識普及之CSS: body{font-size: 62.5%;}這種寫法的原因

易賢網(wǎng)手機(jī)網(wǎng)站地址：CSS教程之div垂直居中的多種方法

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)頁制作

使用CSS制作立體導(dǎo)航欄10月30日

用純CSS3實(shí)現(xiàn)網(wǎng)頁中常見的小箭頭10月30日

有關(guān)HTML5中背景音樂的自動播放功能10月30日

HTML5、Select下拉框右邊加圖標(biāo)的實(shí)現(xiàn)代碼(增進(jìn)用戶體驗(yàn))10月30日

html5實(shí)現(xiàn)圖片轉(zhuǎn)圈的動畫效果——讓頁面動起來10月30日

html5清空畫布方法(三種)10月30日

HTML實(shí)現(xiàn)移動端固定懸浮半透明搜索框10月30日

HTML5 文件域+FileReader 分段讀取文件并上傳到服務(wù)器10月30日

Dreamweaver怎么設(shè)計彩色邊框的表格?10月30日

Dreamweaver怎么給個人簡歷添加照片并排版?10月30日

基于HTML5的WebGL實(shí)現(xiàn)json和echarts圖表展現(xiàn)在同一個界面10月30日

解決HTML5手機(jī)端頁面縮放的問題10月30日

利用純CSS實(shí)現(xiàn)居中的七大方法示例09月29日

CSS3中偽元素::before和::after的用法示例09月29日

詳解使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁排版09月29日

HTML5+CSS3 實(shí)現(xiàn)靈動的動畫 TAB 切換效果(DEMO)09月29日

css3 pointer-events 介紹詳解09月29日

CSS :focus-within的具體使用09月29日

你所不知道的 CSS 動畫技巧與細(xì)節(jié)09月29日

詳解CSS3選擇器:nth-child和:nth-of-type之間的差異09月29日

易賢網(wǎng)移動網(wǎng)站

2026上岸·考公考編培訓(xùn)報班

報班類型
姓名
手機(jī)號
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合