居中之美之垂直居中系列
参考自：http://www.w3cplus.com/collective-5.html
元素垂直居中
1、元素内容是单行，并且其高度是固定不变的，你只要将其“line-height”设置成和“height”值一样就Ok了。（必须单行文本，且高度一定）
html：<div class="vertical">content</div> csss: .vertical { height: 100px; line-height: 100px;/*值等于元素高度的值*/ }
2、给容器设置绝对定位（position:absolute）,并且定位高度（top:50%）和margin-top为高度的一半（margin-top:-height/2）。这样实现的是元素的垂直居中，而不是元素中的内容。，同理水平居中可以设定宽度，left:50%.margin-left:-width/2;
备注：元素定位关系到一个相对定位参考，所以要保证元素是相对于哪个为参考坐标；绝对定位，top,left是相对于postion:relative的父元素的
（高度必须确定）
html:<div class="vertical">content</div>
css: .vertical { height: 100px;/*元素的高度*/ position: absolute; top: 50%;/*元素的顶部边界离父元素的的位置是父元素高度的一半*/
margin-top: -50px;/*设置元素顶边负边距，大小为元素高度的一半*/
3、使用 vertiacl-align:middle 属性值，可以设置行内元素在父容器中垂直居中：
方法：借助一个空的span标签，设置高度100%，使要居中的元素和span元素的vertiacl-align属性都为middle
<div class="page">
<span class="vertical"></span>
<a href=""><img src="/Images/1.jpg" alt="" class="img404"></a>
</div>
.page{ height: 100%;width: 100%;text-align: center; top: 0; left: 0;position: absolute;}
.img404{ width: 400px; vertical-align: middle; }
.vertical{ display:inline-block;width: 1px;height: 100%;margin-left: -1px; vertical-align:middle; }
4、使用的的div模拟表格效果,利用vertical-align的第二种用法用于表格单元格中（不需要设置高度）
<div id="container">
<div id="content">content</div>
</div>
#container {
height: 300px;
display: table;/*让元素以表格形式渲染*/
}
#content {
display:table-cell;/*让元素以表格的单元素格形式渲染*/
vertical-align: middle;/*使用元素的垂直对齐*/
}
5、借助空div，使用float和margin-left:
<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;/*值大小为居中元素高度的一半（240px/2）*/
}
#content {
clear:both;/*清除浮动*/
height: 240px;
position: relative;
}
6、这个方法是针对多行内容居中，而且容器高度是可变的，方法很简单，就是给出上下一样的padding值
（使用这种方法不能给容器固定高度，如果固定高度将无法达到效果。）
<div class="columns">
<div class="item">test</div>
</div>
.item {padding-top:30px;padding-bottom:30px;}
7、任意大小，垂直水平居中，通过jquery。
<div class="container">
<p>Centered In The Middle Of The Page With jQuery</p>
</div>
.container{
background-color:#338BC7;
width:270px;
height:150px;
}
$(document).ready(function(){
$(window).resize(function(){
$('.container').css({
position:'absolute',
left: ($(window).width() - $('.container').outerWidth())/2,
top: ($(window).height() - $('.container').outerHeight())/2
});
});
// 最初运行函数
$(window).resize();
});
附加垂直水平居中插件（封装刚才的js）:
(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);
只需要引用以上js，对需要居中的div，调用其方法即可 $(document).ready(function(){ $(".wrap").vhAlign(); });
（备注：，如果元素不是相对于body居中，那么需要设置其父元素中为相对定位。）
