有些方法在一些瀏覽器中無效，因此，到底選擇哪種方法好，還要看具體情況。
方法一：
這個方法把一些 div 的顯示方式設定為程式設計客棧**，因此我們可以使用**的 vertical-align property 屬性。
複製**
**如下:
content goes here
#wrapper
#cell
優點：content 可以動態改變高度(不需在 css 中定義)。當 wrapper 裡沒有足夠空間時， content 不會被截斷；
缺點：internet explorer(甚至 ie8 beta)中無效，許多巢狀標籤。
方法二：
這個方法使用絕對定位的 div，把它的 top 設定為 50％，top margin 設定為負的 content 高度。這意味著物件必須在 css 中指定固定的高度。
因為有固定高度，或許你想給 content 指定 overflow:auto，這樣如果 content 太多的話，就會出現滾動條，以免content 溢位。
複製**
**如下:
content goes here
#content
優點：適用於所有瀏覽器，不需要巢狀標籤
缺點：沒有足夠空間時，content 會消失(類似div 在 body 內，當使用者縮小瀏覽器視窗，滾動條不出現的情況)
方法三：
這種方法，在 content 元素外插入乙個 div。設定此 div height:50%; margin-bottom:-contentheight;。 www.cppcns.com
content 清除浮動，並顯示在中間。
複製**
**如下:
content here
#floater
#content
優點：適用於所有瀏覽器，沒有足夠空間時(例如：視窗縮小) content 不會被截斷，滾動條出現
缺點：唯一我能想到的就是需要額外的空元素了
方法四：
這個方法使用了乙個 position:absolute，有固定寬度和高度的 div。這個 div 被設定為 top:0; bottom:0;。但是因為它有固定高度，其實並不能和上下都間距為 0，因此 margin:auto; 會使它居中。使用 margin:auto;使塊級元素垂直居中是很簡單的。
複製**
**如下:
content here
#content
優點：簡單；
缺點：ie(ie8 beta)中無效，無足夠空間時，content 被截斷，但是不會有滾動條出現；
方法dgxrtwtmjs五：
這個方法只能將單行文字置中。只需要簡單地把 line-height 設定為那個物件的 height 值就可以使文字居中了。
複製**
**如下:
content here
#content
優點：適用於所有瀏覽器，無足夠空間時不會被截斷
缺點：只對文字有效(塊級元素無效)，多行時，斷詞比較糟糕
這個方法在小元素上非常有用，例如使按鈕文字或者單行文字居中。
本文標題: css實現垂直居中的幾種方法
本文位址:
content here
content here
content here
CSS實現垂直居中的幾種方法
最近上網上找了些關於css實現垂直居中的方法，方法挺多，下面就我看到的幾種好方法在這裡說明一下，使用 css 實現垂直居中並不容易。有些方法在一些瀏覽器中無效，因此，到底選擇哪種方法好，還要看具體情況。方法一 這個方法把一些 div 的顯示方式設定為 因此我們可以使用 的 vertical alig...
css垂直居中的幾種方法
1.lineheight方法 html class container id div1 src test.png 一行文字span div css container div1 div1 img效果 說明 設定了lineheight和容器高度相同，vertical align middle 需要知道...
CSS垂直居中的幾種方法
對於乙個前端開發人員，元素居中在布局中相當常見，水平居中實現非常非常容易，如果是行內元素，設定text align center就行，如果是塊級元素，通過設定邊距margin auto可實現水平居中。垂直居中實現起來相對較為較為麻煩，不囉嗦，直接上乾貨。主要有下面幾種方法 1 絕對定位方法 id m...