摘要：

在我們制作頁面的時候經(jīng)常會遇到內(nèi)容垂直居中的需求，今天分享5種垂直居中的方法，每種方法都有自己的優(yōu)缺點(diǎn)，可以選擇自己喜歡的方式。以下代碼都經(jīng)過本人親自測試。

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>

小結(jié)：

以上代碼本人是在chrome下做的測試，可能有些在ie下會有問題，使用時請注意。

更多信息請查看IT技術(shù)專欄