CSS完美實(shí)現(xiàn)垂直居中的方法及優(yōu)缺點(diǎn)

作者：admin 2010-08-31 14:49:57

CSS實(shí)現(xiàn)垂直居中還是比較使用的，這里向大家介紹一下CSS實(shí)現(xiàn)完美垂直居中的方法以及優(yōu)缺點(diǎn)，主要包括單行內(nèi)容的居中，多行內(nèi)容居中，且容器高度可變等內(nèi)容。

本文和大家重點(diǎn)討論一下CSS實(shí)現(xiàn)***垂直居中的方法和優(yōu)缺點(diǎn)，在CSS中要垂直居中，多數(shù)是在有高度的情況下，或者容器高度不定的情況下才用，另外凡是table布局可以實(shí)現(xiàn)的，CSS一定可以實(shí)現(xiàn)。CSS可以實(shí)現(xiàn)的，table未必能做到。

CSS實(shí)現(xiàn)***垂直居中

在CSS中要垂直居中，多數(shù)是在有高度的情況下，或者容器高度不定的情況下才用，看上去比較舒服，而且實(shí)現(xiàn)的方法也不少，不一定要拘泥于和table布局一樣。不過(guò)最近有人問(wèn)了幾個(gè)例子，看來(lái)對(duì)此的需求還不少。

首先，要有一個(gè)概念：凡是table布局可以實(shí)現(xiàn)的，CSS一定可以實(shí)現(xiàn)。CSS可以實(shí)現(xiàn)的，table未必能做到。

現(xiàn)在來(lái)幾個(gè)例子：

單行內(nèi)容的居中

只考慮單行是最簡(jiǎn)單的，無(wú)論是否給容器固定高度，只要給容器設(shè)置line-height和height，并使兩值相等，再加上over-flow:hidden就可以了。

viewplaincopytoclipboardprint?

.middle-demo-1{  
height:4em;  
line-height:4em;  
overflow:hidden;  
}  
.middle-demo-1{  
height:4em;  
line-height:4em;  
overflow:hidden;  
}

優(yōu)點(diǎn)：

1.同時(shí)支持塊級(jí)和內(nèi)聯(lián)極元素

2.支持所有瀏覽器

缺點(diǎn)：

1.只能顯示一行

2.IE中不支持等的居中

要注意的是：1.使用相對(duì)高度定義你的height和line-height2.不想毀了你的布局的話，overflow:hidden一定要。

為什么？請(qǐng)比較以下兩個(gè)例子：

viewplaincopytoclipboardprint?

<pstylepstyle="background:#900;color:#00f;font:bold12px/24pxHelvertica,  
 
Arial,sans-serif;height:24px;width:370px;"> 
Loremipsumdolorsitamet,consectetueradipiscingelit.p> 
<br/> 
<br/> 
<pstylepstyle="background:#090;color:#00f;font:bold12px/2emHelvertica,  
 
Arial,sans-serif;height:2em;width:370px;overflow:hidden;"> 
Loremipsumdolorsitamet,consectetueradipiscingelit.p> 
<pstylepstyle="background:#900;color:#00f;font:bold12px/24pxHelvertica,  
 
Arial,sans-serif;height:24px;width:370px;"> 
Loremipsumdolorsitamet,consectetueradipiscingelit.p> 
<br/> 
<br/> 
<pstylepstyle="background:#090;color:#00f;font:bold12px/2emHelvertica,Arial,  
 
sans-serif;height:2em;width:370px;overflow:hidden;"> 
Loremipsumdolorsitamet,consectetueradipiscingelit.p>

上一個(gè)高度是用的絕對(duì)單位px，并且沒(méi)有隱藏溢出，下一個(gè)高度用的單位是相對(duì)單位em，并且隱藏了溢出。如果你的瀏覽器支持放大字體，那么盡情地放大字體，看看會(huì)出現(xiàn)什么效果。#p#

多行內(nèi)容居中，且容器高度可變

也很簡(jiǎn)單，給出一致的padding-bottom和padding-top就行

viewplaincopytoclipboardprint?

.middle-demo-2{  
padding-top:24px;  
padding-bottom:24px;  
}  
.middle-demo-2{  
padding-top:24px;  
padding-bottom:24px;  
}

優(yōu)點(diǎn)：

1.同時(shí)支持塊級(jí)和內(nèi)聯(lián)極元素

2.支持非文本內(nèi)容

3.支持所有瀏覽器

缺點(diǎn)：容器不能固定高度

把容器當(dāng)作表格單元

CSS提供一系列diplay屬性值，包括display:table,display:table-row,display:table-cell等，能把元素當(dāng)作表格單元來(lái)顯示。這是再加上vertical-align:middle,就和表格中的valign="center"一樣了。

viewplaincopytoclipboardprint?

.middle-demo-3{  
display:table-cell;  
height:300px;  
vertical-align:middle;  
}  
.middle-demo-3{  
display:table-cell;  
height:300px;  
vertical-align:middle;  
}

可惜IE不支持這些屬性，不過(guò)在其他瀏覽器上顯示效果非常***。要注意的是：和一個(gè)合法的元素必須在

里一樣，display:table-cell元素必須作為display:table的元素的子孫出現(xiàn)。

優(yōu)點(diǎn)：不用說(shuō)了吧，就是表格，效果和表格一模一樣

缺點(diǎn)：IE下無(wú)效#p#

用IE的bug解決IE中的絕對(duì)居中

先不得不說(shuō)一句，IE真的是個(gè)很爛的瀏覽器，CSS1中的定義都不支持，害得要我們轉(zhuǎn)個(gè)大圈子來(lái)造居中。不過(guò)就像我說(shuō)的，凡是table布局可以實(shí)現(xiàn)的，CSS一定可以實(shí)現(xiàn)，即使在IE里也不例外。我研究IElayout模式多年，還是找出了一個(gè)可以在IE中絕對(duì)居中的方法。這個(gè)方法就是基于IElayout的bug，也可以算以毒攻毒。至于原理，不要問(wèn)我，這是獨(dú)門(mén)秘學(xué)，何況三言兩語(yǔ)也講不清楚，只要好用就行。

viewplaincopytoclipboardprint?

.middle-demo-4{  
height:300px;  
position:relative;  
}  
.middle-demo-4div{  
position:absolute;  
top:50%;  
left:0;  
}  
.middle-demo-4divdiv{  
position:relative;  
top:-50%;  
left:0;  
}  
.middle-demo-4{  
height:300px;  
position:relative;  
}  
.middle-demo-4div{  
position:absolute;  
top:50%;  
left:0;  
}  
.middle-demo-4divdiv{  
position:relative;  
top:-50%;  
left:0;  
}