CSS垂直居中實現(xiàn)方法有哪些

這篇文章主要介紹了CSS垂直居中實現(xiàn)方法有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS垂直居中實現(xiàn)方法有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!