CSS實現垂直居中的幾種方法

最近上網上找了些關於css實現垂直居中的方法，方法挺多，下面就我看到的幾種好方法在這裡說明一下，使用 css 實現垂直居中並不容易。有些方法在一些瀏覽器中無效，因此，到底選擇哪種方法好，還要看具體情況。

方法一：

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

#cell

缺點：internet explorer(甚至 ie8 beta)中無效，許多巢狀標籤。

方法二：

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

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

content goes here

#content

優點：適用於所有瀏覽器，不需要巢狀標籤

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

方法三：

這種方法，在 content 元素外插入乙個 div。設定此 div height:50%; margin-bottom:-contentheight;。

content 清除浮動，並顯示在中間。

content here

#floater

#content

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

缺點：唯一我能想到的就是需要額外的空元素了

方法四：

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

content here

#content

優點：簡單；

缺點：ie(ie8 beta)中無效，無足夠空間時，content 被截斷，但是不會有滾動條出現；

方法五：

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

content here

#content

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

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

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