作為前端攻城師，在制作Web頁面時都有碰到CSS制作水平垂直居中，我想大家都有研究過或者寫過，特別的其中的垂直居中，更是讓人煩惱。這段時間，我收集了幾種不同的方式制作垂直居中方法，但每種方法各有千秋呀，要正確的選擇也是一件不容易的事情。我會將這幾種方法一一介紹給大家，以供大家參考。或許對于我這樣的初學者有一定的幫助。

用CSS來實現(xiàn)元素的垂直居中效果是件苦差事，雖然說實現(xiàn)方法有多種，但有很多方式在某些瀏覽器下可能無法正常的工作。接下來我們就一起來看看這些不同方法實現(xiàn)垂直居中的各自優(yōu)點和其不足之處。

方法一：

這種方法用來實現(xiàn)單行垂直居中是相當?shù)暮唵蔚模阒灰ＷC元素內(nèi)容是單行，并且其高度是固定不變的，你只要將其“line-height”設置成和“height”值一樣就Ok了。不過這種方法局限性太大，只有單行文本的元素才適用，所以在多行元素中是不能使用這種方法的。
Html Markup

<div class=”vertical”>content</div>

CSS Code:

.vertical {
height: 100px;
line-height: 100px;/*值等于元素高度的值*/
}

優(yōu)點：

適合在所有瀏覽器，沒有足夠空間時，內(nèi)容不會被切掉

缺點：

僅適合應用在文本和圖片上，并且這種方法，當你文本不是單行時，效果極差，差到讓你感到惡心。

這種方法對運用在小元素上是非常有用的，比如說讓一個button、圖片或者單行文本字段。

方法二：

這種方法將在需要給容器設置絕對定位（position:absolute）,并且定位高度（top:50%）和margin-top為高度的一半（margin-top:-height/2）。這就意味著使用這種方法來實現(xiàn)垂直居中的效果，那么元素必須要有一個固定的高度。這樣一來，你給元素設置了固定高度，如果你又給他設置了“overflow:auto”，那么當元素內(nèi)容超過容器后，這樣元素的就會出現(xiàn)滾動，而不會自適應內(nèi)容的高度。

HTML Markup

<div class=”vertical”>content</div>

CSS Code

.vertical {
height: 100px;/*元素的高度*/
position: absolute;
top: 50%;/*元素的頂部邊界離父元素的的位置是父元素高度的一半*/
margin-top: -50px;/*設置元素頂邊負邊距，大小為元素高度的一半*/
}

優(yōu)點：

能在各瀏覽器下工作，結構簡單明了，不需增加額外的標簽

缺點：

由于固定死元素的高度，致使沒有足哆的空間，當內(nèi)容超過容器的大小時，要么會消息，要么會出現(xiàn)滾動條（如果元素在body內(nèi)，當用戶縮小瀏覽器窗口時，body的滾動條將不會出現(xiàn)）。

這種方法主要是針對多行元素來進行元素的垂直居中，而并非是此元素的內(nèi)容垂直居中，這一點先要理解并分開清楚。另外此方法是通過絕對定位來實現(xiàn)的，那么用這種方法實現(xiàn)元素的垂直居中需要注意以下幾點：其一元素定位關系到一個相對定位參考，所以要保證元素是相對于哪個為參考坐標；另外需要設置給元素明確定一個高度值并且給元素設置一個負值的margin-top，而且值為元素高度的一半。這里我建議大家給元素定一個寬度值，因為元素進行絕對定位后脫離文檔流，其寬度是根據(jù)元素內(nèi)容所占寬度來計算的，為這能讓其視覺效果更好，最好給元素定義一個寬度值。