中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

摘要：

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

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下做的測(cè)試，可能有些在ie下會(huì)有問題，使用時(shí)請(qǐng)注意。

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