5種實現垂直居中css

在我們製作頁面的時候經常會遇到內容垂直居中的需求，今天分享5種垂直居中的方法，每種方法都有自己的優缺點，可以選擇自己喜歡的方式。以下**都經過本人親自測試。

<

style
>
.content 
style
>
<
div 
class
="content"
>
vertical-align:middle;
div>

<

style
>
.content 
.child:before 
style
>
<
div 
class
="content"
>
<
div 
class
="child"
>

vertical-align:middle;

div>
div>

<

style
>
.content 
.child 
style
>
<
div 
class
="content"
>
<
div 
class
="child"
>
vertical-align:middle;
div>
div>

<

style
>
.content 
.child 
style
>
<
div 
class
="content"
>
<
div 
class
="child"
>
vertical-align:middle;
div>
div>

<

style
>
#content 
#child 
style
>
<
div 
id="content"
>
<
div 
id="child"
>
vertical-align:middle;
div>
div>

以上**本人是在chrome下做的測試，可能有些在ie下會有問題，使用時請注意。

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