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