CSS完美實現垂直居中的方法及優缺點

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

開發前端

CSS實現垂直居中還是比較使用的，這里向大家介紹一下CSS實現完美垂直居中的方法以及優缺點，主要包括單行內容的居中，多行內容居中，且容器高度可變等內容。

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

CSS實現***垂直居中

在CSS中要垂直居中，多數是在有高度的情況下，或者容器高度不定的情況下才用，看上去比較舒服，而且實現的方法也不少，不一定要拘泥于和table布局一樣。不過最近有人問了幾個例子，看來對此的需求還不少。

首先，要有一個概念：凡是table布局可以實現的，CSS一定可以實現。CSS可以實現的，table未必能做到。

現在來幾個例子：

單行內容的居中

只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設置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;  
}

優點：

1.同時支持塊級和內聯極元素

2.支持所有瀏覽器

缺點：

1.只能顯示一行

2.IE中不支持等的居中

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

為什么？請比較以下兩個例子：

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>

上一個高度是用的絕對單位px，并且沒有隱藏溢出，下一個高度用的單位是相對單位em，并且隱藏了溢出。如果你的瀏覽器支持放大字體，那么盡情地放大字體，看看會出現什么效果。#p#

多行內容居中，且容器高度可變

也很簡單，給出一致的padding-bottom和padding-top就行

viewplaincopytoclipboardprint?

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

優點：

1.同時支持塊級和內聯極元素

2.支持非文本內容

3.支持所有瀏覽器

缺點：容器不能固定高度

把容器當作表格單元

CSS提供一系列diplay屬性值，包括display:table,display:table-row,display:table-cell等，能把元素當作表格單元來顯示。這是再加上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不支持這些屬性，不過在其他瀏覽器上顯示效果非常***。要注意的是：和一個合法的元素必須在

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

優點：不用說了吧，就是表格，效果和表格一模一樣

缺點：IE下無效#p#

用IE的bug解決IE中的絕對居中

先不得不說一句，IE真的是個很爛的瀏覽器，CSS1中的定義都不支持，害得要我們轉個大圈子來造居中。不過就像我說的，凡是table布局可以實現的，CSS一定可以實現，即使在IE里也不例外。我研究IElayout模式多年，還是找出了一個可以在IE中絕對居中的方法。這個方法就是基于IElayout的bug，也可以算以毒攻毒。至于原理，不要問我，這是獨門秘學，何況三言兩語也講不清楚，只要好用就行。

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;  
}