vertical-align: middle;
width: 1px;
}
</style>
<![endif]–>
优点：
这种方法的优点和方法三是一样的，不会有高度的限制。
缺点：
不好的地方就是这种方法为了让IE运行正常，需要额外增加一些标签，另外就是线盒型的标签种类有限制。不过用起来还是蛮方便的。
方法六：
这种方法是采用的display:inline-block，然后借助另一个元素的高度来实现居中
Html Markup
<div id=”parent”>
<div id=”vertically_center”>
<p>I am vertically centered!</p>
</div>
<div id=”extra”><!– ie comment –></div>
</div>
CSS Code
<style type=”text/css”>
html,
body{
height: 100%;
}
#parent {
height: 500px;/*定义高度，让线盒型div#extra有一个参照物，可以是固定值，也可以是百分比*/
border: 1px solid red;
}
#vertically_center,
#extra {
display: inline-block;/*把元素转为行内块显示*/
vertical-align: middle;/*垂直居中*/
}
#extra {
height: 100%; /*设置线盒型为父元素的100%高度*/
}
</style>
<!–[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，需要给他们另外写一个样式。
这是一个很有意思的方法，但你要懂得如何使用display。有关于这种方法的操作，大家可以去看一看Jonathan Potter写的《CSS, Vertical Centering》。
方法七：
这个方法是针对多行内容居中，而且容器高度是可变的，方法很简单，就是给出上下一样的padding值
Html Code
<div class=”columns”>
<div class=”item”>test</div>
</div>
CSS Code
.item {padding-top:30px;padding-bottom:30px;}
优点：
在所有浏览器下能正常工作，支持所有元素，简单易懂，结构清晰
缺点：
使用这种方法不能给容器固定高度，如果固定高度将无法达到效果。
方法八：
正如前面所述，如果元素固定高度后要实现垂直居中，用CSS实现很方便，但对于自适应高度的就比较棘手了。那么第七种方法，要给大家介绍的是使用jQuery的方法
