CSS垂直居中實現方法大全

2024-07-11 08:30:12

字體：大中小

來源：轉載

供稿：網友

摘要：
　　在我們制作頁面的時候經常會遇到內容垂直居中的需求，今天分享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下會有問題，使用時請注意。

上一篇：淺談Span和Div的區別

下一篇：CSS多列布局實現方法大全