CSS垂直居中实现方法有哪些
导读:本文共1083.5字符,通常情况下阅读需要4分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: line-height:复制代码代码如下:<style>.content {height:240px;line-height: 240px;}</style><div class="content">vertical-align:middle;</div>:before:复制代码代码如下:<... ...
目录
(为您整理了一些要点),点击可以直达。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垂直居中实现方法有哪些的详细内容,希望对您有所帮助,信息来源于网络。