有关css垂直居中的五种方法，line-height、:before、padding-top、position:absolute、display:table-cell五种方式实现垂直居中，需要的朋友参考下。
5种css垂直居中效果
1、line-height 实现垂直居中：
复制代码 代码示例:
<style>
.content {
height:240px;
line-height: 240px;
}
</style>
<div class="content">
vertical-align:middle;
</div>
2、:before 实现垂直居中：
复制代码 代码示例:
<style>
.content {
height: 240px;
}
.child:before {
content: ' ';
display: block;
height: 120px;
}
</style>
<div class="content">
<div class="child">
vertical-align:middle;</p>
<p></div></div>
3、padding-top 实现垂直居中：
复制代码 代码示例:
<style>
.content {
height:240px;
}
.child {
padding-top: 120px;
} // www.plcxue.com
</style>
<div class="content">
<div class="child">
vertical-align:middle;
</div>
</div>
4、position:absolute 实现垂直居中：
复制代码 代码示例:
<style>
.content {
position:absolute;
height:240px;
}
.child {
position: relative;
top:50%;
}
</style>
<div class="content">
<div class="child">
vertical-align:middle;
</div>
</div>
5、display:table-cell 实现垂直居中;
复制代码 代码示例:
<style>
#content {
display:table;
}
#child {
display:table-cell;
vertical-align:middle;
height: 300px;
}
</style>
<div id="content">
<div id="child">
vertical-align:middle;
</div>
</div>
在chrome下测试成功，在ie下会有问题，使用时注意。
