摘要：

在我们制作页面的时候经常会遇到内容垂直居中的需求，今天分享5种垂直居中的方法，每种方法都有自己的优缺点，可以选择自己喜欢的方式。以下代码都经过本人亲自测试。

line-height：

代码如下:

<style>

.content {

height:240px;

line-height: 240px;

}

</style>

<div class="content">

vertical-align:middle;

</div>

: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>

padding-top：

代码如下:

<style>

.content {

height:240px;

}

.child {

padding-top: 120px;

}

</style>

<div class="content">

<div class="child">

vertical-align:middle;

</div>

</div>

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>

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下会有问题，使用时请注意。

更多信息请查看IT技术专栏