這裡介紹實作元素垂直居中的方式，文章是參考了《css制作水準垂直居中對齊》這一篇文章。
1.行高和高度實作
這種方式實作單行垂直居中是很簡單的，但是要保證元素内容是單行的，并且其高度是不變的，隻要将“line-height”和“height”設定成一樣的就可以了。這種方式局限性在于隻有單行文本的元素才适用，多行元素是不适用的。
html代碼：
<div class="vertical">
<span>aaa</span>content
</div> css代碼：
.vertical {
height: 100px;
line-height: 100px;
} 效果：
缺點：這裡“aaa”内容包含在span中，span是行内元素，是以仍然是一行，換成div就不行了。這種方式僅僅适合在文本和圖檔上，并且文本不再是單行時，效果不好。在一些小元素上還是很合适的，比如一個button，image，或者單行文本，h1上。
2.容器絕對定位
這種方法需要給容器設定絕對定位，position:absolute，并且定位高度（top:50%），margin-top為高度的一半（margin-top:-height/2）。這就意味着元素必須要有一個固定的高度，這樣一來給元素設定了固定高度，如果又設定overflow:auto，當元素内容超過容器後，元素就會出現滾動，而不會自适應内容高度。
<div class="vertical">
content
</div> .vertical {
height: 100px; /*元素高度*/
position: absolute; /* 絕對定位 */
left: 50%; /*配合margin-left的負值實作水準居中*/
top: 50%; /* 元素的頂部邊界離父元素的位置是父元素高度的一半 */
margin-top: -50px; /*設定元素頂邊負邊距，大小為元素高度的一半*/
} 效果如下：
缺點：這種方式可以在各種浏覽器下工作，解構簡單明了，不需要額外添加标簽。但是由于固定死元素的高度，隻是沒有足夠的空間，當内容超過容器大小時，要麼會出現滾動條（如果元素在body内，當使用者縮小浏覽器視窗時，body的滾動條将不會出現），要麼會消失。
這種方式針對多行元素來進行垂直居中，而且并非是此元素的内容垂直居中。另外此方法是通過絕對定位來實作的，要注意下面幾點：其一進制素定位關系到一個相對定位參考，是以要保證元素是相對那一個參考坐标；另外需要給元素設定一個明确的高度值，并給元素設定一個margin-top，而且其值為元素高度的一半。最好還要給元素一個寬度，因為絕對定位後脫離文檔流，其寬度是根據元素内容所占的寬度來計算了，為了能讓視覺效果更好，最好設定一個寬度值。
照葫蘆畫瓢，還可以設定元素水準居中，css代碼如下：
.vertical {
height: 100px; /*元素高度*/
width: 100px; /*元素寬度*/
position: absolute; /* 絕對定位 */
left: 50%; /*配合margin-left的負值實作水準居中*/
top: 50%; /* 元素的頂部邊界離父元素的位置是父元素高度的一半 */
margin-top: -50px; /*設定元素頂邊負邊距，大小為元素高度的一半*/
margin-left: -50px; /*設定元素左邊負邊距，大小為寬度的一半*/
} 這種方式可以實作元素水準居中，長用于頁面在中間的布局，使用這種方式要注意：水準垂直居中的元素要有明确大小（就是要有明确的高度，寬度值）；給元素進行絕對定位，并設定left，top值為50%（最好使用絕對定位，如果隻是水準居中，可以換成相對定位）；最後設定margin-top和margin-left的負值，大小為元素寬度和高度的一半。
3.div模拟表格
這種方法是使用div模拟表格效果，也就是将多個div的“display”屬性設定為“table”和“table-cell”，并設定他們的“vertical-align”屬性為“middle”。參考《The display declaration》這篇文章。
html代碼如下：
<div id="container">
<div id="content">content</div>
</div> #container {
height: 300px;
display: table; /*讓元素以表格形式渲染*/
}
#content {
display: table-cell; /*讓元素以表格的單元格形式渲染*/
vertical-align: middle; /*使用元素的垂直對齊*/
} 缺點：這種方式不會像上面兩種一樣有高度的限制，可以根據元素的内容改變高度，進而沒有空間的限制，元素的内容不會因為沒有足夠的空間而被切斷或者出現難看的滾動條。但是這種方法隻适合于現代浏覽器，IE6-7無法正常運作，因為IE6-7不支援display:table，為了解決問題，需要額外增加一個div，并且使用hack，如下：
<div class="table">
<div class="tableCell">
<div class="content">content</div>
</div>
</div> .table {
height: 300px; /*高度值不能少*/
width: 300px; /*寬度值不能少*/
display: table;
position: relative;
float: left;
}
.tableCell {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
*position: absolute;
*top: 50%;
*left: 50%;
}
.content {
*position: relative;
*top: -50%;
*left: -50%;
} 這裡使用了“*”标記來相容IE6-7浏覽器
4.使用空的<div>元素
這種方式比較新奇，在需要居中的元素前面放一個<div>（塊元素即可），然後設定這個<div>的高度為50%，margin-bottom為元素高度的一半，并且居中元素需要清除浮動。要注意使用這種方式，如果居中元素放在body中的話，需要給html，body設定一個“height:100%”的屬性。
html代碼：
<body>
<div id="floater"><!--This block have empty content--></div>
<div id="content">Content section</div>
</body> html, body {
height: 100%
}
#floater {
float: left;
height: 50%; /*相對父元素高度的50%*/
margin-bottom: -120px; /*值大小為居中元素高度的一半*/
}
#content {
clear: both; /*清除浮動*/
height: 240px;
position: relative;
} 缺點：這種方式能相容所有浏覽器，在沒有足夠空間下，内容不會被切掉。但是也有缺點，元素高度被固定死，無法達到内容自适應高度，如果居中元素加上overflow屬性，要麼元素出現滾動條，要麼被切掉。另外還有一個缺點，就是額外添加了一個空标簽。
5.盒模型
這種方法和第三種一樣使用display:table-cell，不同之處在于需要一個盒模型。為了實作相容IE，需要增加一個行内标簽，比如“span”（最好使用行内标簽，不能使用塊标簽，否則沒有效果），并把這個盒模型高度設定為100%，原理可以參考《大小不固定的圖檔，多行文字的水準垂直居中》。
<p class="table">
<span class="tableCell">
Centering multiple lines <br> in a block container.
</span>
<!--[if lte IE 7]><b></b><![endif]-->
</p> <style type="text/css">
.table {
border: 1px solid orange;
display: table;
height: 200px;
width: 200px;
text-align: center;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
</style>
<!--[if lte ie 7]>
<style type="text/css">
/*第五種方法*/
.tableCell {
display: inline-block;
}
b {
display: inline-block;
height: 100%;
vertical-align: middle;
width: 1px;
}
</style>
<![endif]--> 缺點：和第三種方法一樣，這種方法不會有高度的限制。缺點是這種方法為了讓IE正常運作，需要額外增加一些标簽，另外就是盒模型的标簽有類型限制，隻能添加行内标簽。
6.inline-block方法
這個種方式采用的是display:inline-block，然後借助另一個元素的高度來實作居中。
<div id="parent">
<div id="vertically_center">
<p>I am vertically centered!</p>
</div>
<div id="extra"></div>
</div> html,body{
height: 100%;
}
#parent {
height: 500px; /*定義高度，讓線盒模div#eatra有一個參照物，可以是固定值，也可以是參照物*/
border: 1px solid red;
}
#vertically_center,#extra {
display: inline-block; /*把元素轉為行内元素顯示*/
vertical-align: middle; /*垂直居中*/
}
#extra {
height: 100%;
}
<!--[if lt IE 8]>
<style type="text/css">
/*IE6-7不支援display:inline-block，是以在ie6-7另外寫一個hack，用來支援ie6-7*/
#vertically_center, #extra {
display: inline; zoom: 1;
}
#extra {
width: 1px;
}
</style>
<![endif]--> 缺點：這種方式自适應高度，簡單易懂，但是需要給元素的父元素設定一個高度，可以是一個固定值或者百分比，另外需要增加一個額外的标簽，當做盒模型，如div#extra，并且需要設定高度為100%。另外IE6-7不支援display:inline-block，需要給他們另外寫一個樣式。關于這種方法的操作可以參考：《CSS，Vertical Centering》
7.多行内容居中
這個方法是針對多行内容居中，而且容器高度是可變的，方法很簡單，就是給出上下一個樣的padding值。
<div class="columns">
<div class="item">
<span>test1</span>
<span>test2</span>
</div>
</div> .item {
padding-top: 30px;
padding-bottom: 30px;
} 缺點：這種方法支援所有浏覽器，支援所有元素，簡單易懂，結果清晰，但是使用這種方法不能給容器高度，如果高度固定則無法達到效果。
8.jquery實作
如果元素固定高度，實作垂直居中很友善，但是自适應高度就比較棘手，這次我們可以使用jquery方法實作。
<div class="container">
<p>Centered In the middle of the page with jQuery</p>
</div> .container {
background-color: #338BC7;
width: 270px;
height: 150px;
} jquery代碼：
<script>
$(document).ready(function () {
$(window).resize(function () {
$('.container').css({
position: 'absolute',
left: ($(window).width() - $('.container').outerWidth()) / 2,
top: ($(window).height() - $('.container').outerHeight()) / 2
})
})
})
</script> 缺點：這種方法解構簡單，易懂，不需要固定元素大小，相容各種浏覽器。缺點是要調用jquery，如果不支援js将無法運作。
9.jquery插件
根據第8種方法，可以寫一個實作元素水準垂直居中的小插件，jquery插件代碼如下：
(function ($) {
$.fn.vhAlign = function () {
return this.each(function (i) {
//擷取元素的内容高度
var h = Math.ceil($(this).height());
//outerHeight=padding+border+height
var oh = Math.ceil($(this).outerHeight());
//取得margin-top值
var mt = Math.ceil(oh / 2);
//取得元素寬度
var w = Math.ceil($(this).width());
//outerWidth=padding+border+width
var ow = Math.ceil($(this).outerWidth());
//取得margin-left
var ml = Math.ceil(ow / 2);
//實作元素居中效果
$(this).css({
"margin-top": "-" + mt + "px",
"top": "50%",
"margin-left": "-" + ml + "px",
"left": "50%",
"width": w,
"height": h,
"position": "absolute"
});
});
};
})(jQuery); <div class="wrap">
<p>test jquery</p>
</div> 引入這個插件：
<script type="text/javascript" src="vhAlign.js"></script> 調用這個插件：
$(document).ready(function () {
$('.wrap').vhAlign();
}) 缺點：這裡有一點需要注意，如果元素不是相對body居中，需要在父元素中進行相對定位。
作者：
Tyler Ning出處：http://www.cnblogs.com/tylerdonet/
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，如有問題，請微信聯系冬天裡的一把火