讓div垂直居中的5種方法

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

html & css:

1

<
div 
class
>
2<
div 
class
="cell"
>
3<
div 
class
="content"
>
4<
h1>把div顯示方式設定為**
h1>
5div
>
6div
>
7div
>

1

2.cell 

缺點： 

internet explorer(甚至 ie8 beta)中無效

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

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

html & css:

1

<
div 
class
="content"
>
2對定位的 div，把它的 top 設定為 50％，top margin 設定為負的 content 高度。這意味著物件必須在 css 中指定固定的高度。
3div
>

1

.content 

優點： 

適用於所有瀏覽器 

不需要巢狀標籤

缺點： 

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

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

html:

1

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

1

.content 

優點： 

簡單缺點： 

ie(ie8 beta)中無效 

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

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

html:

1

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

1

#content 

優點： 

適用於所有瀏覽器 

無足夠空間時不會被截斷

缺點： 

只對文字有效(塊級元素無效) 

多行時，斷詞比較糟糕

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

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

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

html:

1

<
div 
class
="content"
>
2在 content 元素外插入乙個 div。設定此 div height:50%; margin-bottom:-contentheight; content 清除浮動，並顯示在中間。
3div
>

1

.floater 
7.content 

優點： 

適用於所有瀏覽器 

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

缺點： 

唯一能想到的就是需要額外的空元素

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

比較簡單，而且讓元素垂直居中的同時，元素也能夠橫向居中。

對於非塊級元素而言，我們可以在外部新增 塊級元素作為盒子，也可以通過 display 屬性，將行內元素變為塊級元素，再使用此方法。

（ **於

讓div水平垂直居中的幾種方法

最近，公司招了一批新人，吃飯的時候恰好碰到乙個新同事，就跟他聊了起來。聽他說了主管面試的時候出的一些問題，其中乙個問題我印象特別深刻，因為，我當年進來的時候，也被問到這個問題。雖然這個問題已經問爛了，但是我還是有必要在這裡總結乙個這個問題。利用 css 來實現物件的垂直居中有許多不同的方法，比較難的...

div水平垂直居中的六種方法

方法一 絕對定位方法 不確定當前div的寬度和高度，採用 transform translate 50 50 當前div的父級新增相對定位 position relative 如下 div 方法二 絕對定位方法 確定了當前div的寬度，margin值為當前div寬度一半的負值 如下 div 方法三 ...

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

原文出自 糖伴西紅柿 利用 css 來實現物件的垂直居中有許多不同的方法，比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎麼來建立乙個好的居中 使用 css 實現垂直居中並不容易。有些方法在一些瀏覽器中無效。下面我們看一下使物件垂直集中的5種不同方法，以及它們各自的優缺點。可以看看測...