CSS元素垂直居中
程序员文章站
2022-03-18 21:36:40
...
CSS让人头疼的问题就是垂直居中。实现垂直居中好几种方式，但每一种方式都有一定的局限性,所以垂直居中可以根据实际的业务场景来使用。
1.容器里面的内容只有一行文字
<!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 60px;
background-color: #1888fa;
color: white;
}
span {
line-height: 60px;/* 设置一个大的行高，让它等于理想的容器高度。
这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。 */
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html>
2.容器自然高度
CSS中最简单的垂直居中方法是给容器相等的上下内边距，让容器和内容自行决定自己的高度。看下面的例子, 通过设置padding-top 和padding-bottom相等的值，让内容在父容器垂直居中。
<!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
padding-top: 20px;
padding-bottom: 20px;
background-color: #1888FA;
color: white;
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html>
3.使用 FlexBox
<!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #1888fa;
color: white;
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html>
推荐：《2021年CSS面试题汇总（最新）》
以上就是CSS元素垂直居中的详细内容，更多请关注其它相关文章！
上一篇： Html 实现动态显示颜色块的报表效果(实例代码)
下一篇： css怎么实现英文不换行