摘要：

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

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技術專欄