摘要：
在我们制作页面的时候经常会遇到内容垂直居中的需求，今天分享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下会有问题，使用时请注意。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
更新日志
- 单依纯《纯情歌》2024最新 开盘母带1：1直刻[547M]
- 永劫无间手游沈妙怎么样 技能奥义介绍
- 三角洲行动穿透机制介绍 穿透等级穿透效果一览
- 吟游战记巨刃特蕾值得培养吗 角色技能属性详解
- 逆水寒手游创意工坊玩法介绍 逆水寒创意工坊怎么玩
- 逆水寒手游雀隐重楼玩法介绍 逆水寒手游雀隐重楼是什么
- 逆水寒手游神器系统玩法攻略 逆水寒手游神器系统怎么玩
- PS5首席架构师提交新专利：PS5有望原生运行PS3游戏？
- 数据显示：《地狱潜者2》在PC平台已失去90%的玩家
- 质疑和守望先锋太像？《星鸣特攻》开发商:我们与众不同
- 【休闲沙发】VA-2024-CalmReflections：ChilloutYourMind(FLAC)
- 【迷幻沙发】Koan(公案)-2024-TheQueenofSpades(SideA)(FLAC)
- 群星2006-银河映像1996-20052CD[香港首版][WAV+CUE]
- 外媒盘点游戏里十大最可怕外星生物：第一名是老熟人
- 阿拉贡演员谈参演《咕噜》新电影：要视情况而定