方法一
這個方法把一些 div 的顯示方式設定為**，因此我們可以使用**的 vertical-align property 屬性。
<
divid=
>
<
divid=
"cell"
>
<
div
class
="content"
>
content goes here
<
/div>
<
/div>
<
/div>
#cell
優點：
缺點：
internet explorer(甚至 ie8 beta)中無效，許多巢狀標籤(其實沒那麼糟糕，另乙個專題)
方法二：
這個方法使用絕對定位的 div，把它的 top 設定為 50％，top margin 設定為負的 content 高度。這意味著物件必須在 css 中指定固定的高度。
因為有固定高度，或許你想給 content 指定 overflow:auto，這樣如果 content 太多的話，就會出現滾動條，以免content 溢位。
<
div
class
="content"
>
content goes here
<
/div>
#content
優點：
適用於所有瀏覽器
不需要巢狀標籤
缺點：
沒有足夠空間時，content 會消失(類似div 在 body 內，當使用者縮小瀏覽器視窗，滾動條不出現的情況)
方法三
這種方法，在 content 元素外插入乙個 div。設定此 div height:50%; margin-bottom:-contentheight;。
content 清除浮動，並顯示在中間。
<
divid=
"floater"
><
/div>
<
divid=
"content"
>
content here
<
/div>
#floater
#content
優點：
適用於所有瀏覽器
沒有足夠空間時(例如：視窗縮小) content 不會被截斷，滾動條出現
缺點：
唯一我能想到的就是需要額外的空元素了(也沒那麼糟，又是另外乙個話題)
方法四
這個方法使用了乙個 position:absolute，有固定寬度和高度的 div。這個 div 被設定為 top:0; bottom:0;。但是因為它有固定高度，其實並不能和上下都間距為 0，因此 margin:auto; 會使它居中。使用 margin:auto;使塊級元素垂直居中是很簡單的。
<
divid=
"content"
>
content here
<
/div>
#content
優點：
簡單缺點：
ie(ie8 beta)中無效
無足夠空間時，content 被截斷，但是不會有滾動條出現
方法五
這個方法只能將單行文字置中。只需要簡單地把 line-height 設定為那個物件的 height 值就可以使文字居中了。
<
divid=
"content"
>
content here
<
/div>
#content
優點：
適用於所有瀏覽器
無足夠空間時不會被截斷
缺點：
只對文字有效(塊級元素無效)
多行時，斷詞比較糟糕
這個方法在小元素上非常有用，例如使按鈕文字或者單行文字居中。
CSS實現垂直居中的5種方法
原文出自 糖伴西紅柿 利用 css 來實現物件的垂直居中有許多不同的方法，比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎麼來建立乙個好的居中 使用 css 實現垂直居中並不容易。有些方法在一些瀏覽器中無效。下面我們看一下使物件垂直集中的5種不同方法，以及它們各自的優缺點。可以看看測...
CSS實現垂直居中的5種方法
display table cell content goes here content 不需要巢狀標籤 height 50 margin bottom contentheight content 清除浮動，並顯示在中間。content here floater content 沒有足夠空間時 例如...
CSS實現垂直居中的5種方法
這個方法把一些div的顯示方式設定為 因此我們可以使用 的vertical alignproperty 屬性。div id div id cell div class content content goes here div div div cell 優點 缺點 這個方法使用絕對定位的div，把它...