整理CSS實現垂直置中的5種方法優缺點

方法一

這個方法把一些div的顯示方式設定為表格，因此我們可以使用表格的vertical-alignproperty屬性。

<divid="wrapper">

<divid="cell">

<divclass="content">

Contentgoeshere</div>

</div>

</div>

#wrapper{display:table;}

#cell{display:table-cell;vertical-align:middle;}

優點：
content可以動態改變高度(不需在CSS中定義)。當wrapper裡沒有足夠空間時，content不會被截斷

缺點：
InternetExplorer(甚至IE8beta)中無效，許多嵌套標籤(其實沒那麼糟糕，另一個專題)

方法二：

這個方法使用絕對位置的div，把它的top設定為50％，topmargin設定為負的content高度。這意味著對象必須在CSS中指定固定的高度。

因為有固定高度，或許你想給content指定overflow:auto，這樣如果content太多的話，就會出現捲軸，以免content溢出。

<divclass="content">

Contentgoeshere</div>

#content{

position:absolute;

top:50%;

height:240px;

margin-top:-120px;/*negativehalfoftheheight*/

}

優點：
適用於所有瀏覽器
不需要嵌套標籤

缺點：
沒有足夠空間時，content會消失(類似div在body內，當使用者縮小瀏覽器視窗，捲軸不出現的情況)

方法三

這種方法，在content元素外插入一個div。設定此divheight:50%;margin-bottom:-contentheight;。
content清除浮動，並顯示在中間。

<divid="floater"></div>

<divid="content">

Contenthere

</div>

#floater{float:left;height:50%;margin-bottom:-120px;}

#content{clear:both;height:240px;position:relative;}

優點：
適用於所有瀏覽器
沒有足夠空間時(例如：視窗縮小)content不會被截斷，捲軸出現

缺點：
唯一我能想到的就是需要額外的空元素了(也沒那麼糟，又是另外一個話題)

方法四

這個方法使用了一個position:absolute，有固定寬度和高度的div。這個div被設定為top:0;bottom:0;。但是因為它有固定高度，其實並不能和上下都間距為0，因此margin:auto;會使它置中。使用margin:auto;使區塊層級元素垂直置中是很簡單的。

<divid="content">

Contenthere</div>

#content{

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

height:240px;

width:70%;

}

優點：
簡單

缺點：
IE(IE8beta)中無效
無足夠空間時，content被截斷，但是不會有捲軸出現

方法五

這個方法只能將單行文本置中。只需要簡單地把line-height設定為那個對象的height值就可以使文本置中了。

<divid="content">

Contenthere</div>

#content{height:100px;line-height:100px;}

優點：
適用於所有瀏覽器
無足夠空間時不會被截斷

缺點：
只對文本有效(區塊層級元素無效)
多行時，斷詞比較糟糕

這個方法在小元素上非常有用，例如使按鈕文本或者單行文本置中。