垂直居中全家
一、首先讲一下比较简单的文本的垂直居中。

1、单行文字居中使用line-height方法，将文本的line-height设为与容器的height相等即可。非常好用，兼容于各主流浏览器（包括IE6）。

height:100px;
line-height:100px;2、单行文字居中还可以使用一种利用空白的辅助span的方式，比较另类，基本没什么用。但作为一种方法还是放出来看看。


<style type="text/css">
div{
border:1px solid #000;
width:100px;
height:200px;
}
#fix{
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
</style>
<div">
<span id="fix"></span>
我是一行字
</div>3.多行文字垂直居中，因为有多个块级元素，这个没有好的处理方式，要嘛把多行文字包起来放在一个div中再处理。要嘛就是利用变通的方式，设置容器的上下padding为相同大小来达到垂直居中的效果，缺点也很明显，就是容器的大小没法固定。

二、固定大小的块级元素的垂直居中。

1、各现代浏览器（chrome，firefox，IE8）均开始支持display:talbe;这些特性，因此对于这些浏览器，可以使用display:table-cell再设置vertical-align进行居中对齐，再利用其他手段做ie6、ie7的hack。这也是现在的主流做法。

设置外层容器为表格单元格形式：

display:table-cell;
vertical-align:middle;2、定位方式，这个和水平居中一样，两者结合可以实现元素居中显示。

div{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%
margin-top:-50px;
margin-left:-50px;
}3.另一种定位方式，多加一层块级元素，先将中层元素top:50%;left:50%;使其左上角指向容器中点，再设置内层元素top:-50%;left:-50%;修正到内层元素的中点。

三、最为复杂的图片垂直居中对齐。

1、和块级元素一样，可以使用table的显示方式实现居中，当然，IE6、7仍然不支持。

display:table-cell;
vertical-align:middle;2、line-height的方式，由于img元素不能直接使用line-height属性，需要用一个内联元素如span将img包裹起来。然后设置span的line-height等于外层容器的height，再设置img的vertical-align属性为middle。

有意思的是，span内必须有文字或者边框，否则无法实现居中。这种方法依然不适用于IE6。

div{
border:1px solid #000;
width:100px;
height:200px;
line-height:200px;
}
div span{
border: 1px solid red;
}
div span img{
vertical-align: middle;
}3.定位方式。这个与上面的块级元素定位方式相似，不再累述。需要说明的是，当图片大小未知时，上面的方法在标准浏览器下都无法使用。但是在IE中，可以使用上面的第二种定位方式，即利用两层div定位的方式。

4.下面说两种IE下的解决方案，常常用于hack而与别的方式结合实现图片垂直居中。首先是writing-mode方式，很有趣的一种方法：

当writing-mode为tb-rl 时，文档流是从上到下，从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。

具体的用法请移步：IE6下用writing-mode实现 未知高度替换元素垂直居中。

5.下面是淘宝推荐的方法，设置容器的font-size为容器高度的0.873。这个方法比较简洁而且hack字节量较小。和table-cell的方式结合可以完美解决容器内图片垂直居中的问题。

<style type="text/css">
.box {
display: table-cell; /*除ie外其他浏览器采用表格居中的方式*/
vertical-align:middle;
text-align:center;
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
vertical-align:middle; border:0;
}
</style>
<div>
<img src="1.jpg" />
</div>
点击这里上例效果。

5、最后也是最简单的方法，背景图片居中的方式，和水平居中一样的用法。

猛击这里查看所有效果。

-- Return null --