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

使用 css 實現垂直居中並不容易。有些方法在一些瀏覽器中無效。下面我們看一下使物件垂直集中的5種不同方法，以及它們各自的優缺點。

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

content goes herediv>

div>

div>

.cell

優點：

internet explorer(甚至 ie8 beta)中無效，許多巢狀標籤(其實沒那麼糟糕，另乙個專題)

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

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

 content goes herediv>  

.content 

適用於所有瀏覽器

不需要巢狀標籤

缺點：

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

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

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

div>  

content here div>

.floater 

.content 

適用於所有瀏覽器

沒有足夠空間時(例如：視窗縮小) content 不會被截斷，滾動條出現

缺點：

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

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

 content herediv>  

.content 

簡單缺點：

ie(ie8 beta)中無效

無足夠空間時，content 被截斷，但是不會有滾動條出現

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

 content herediv> 

.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 沒有足夠空間時 例如...