CSS垂直居中实现方法有哪些

这篇文章主要介绍了CSS垂直居中实现方法有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

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垂直居中实现方法有哪些”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!