css让人头疼的问题就是垂直居中。实现垂直居中好几种方式，但每一种方式都有一定的局限性,所以垂直居中可以根据实际的业务场景来使用。
1.容器里面的内容只有一行文字
nbsp;html> * { padding: 0; margin: 0; } div { height: 60px; background-color: #1888fa; color: white; } span { line-height: 60px;/* 设置一个大的行高，让它等于理想的容器高度。 这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。 */ } 测试
登录后复制
2.容器自然高度
CSS中最简单的垂直居中方法是给容器相等的上下内边距，让容器和内容自行决定自己的高度。看下面的例子, 通过设置padding-top 和padding-bottom相等的值，让内容在父容器垂直居中。
nbsp;html> * { padding: 0; margin: 0; } div { padding-top: 20px; padding-bottom: 20px; background-color: #1888FA; color: white; } 测试
登录后复制
3.使用 FlexBox
nbsp;html> * { padding: 0; margin: 0; } div { height: 60px; display: flex; align-items: center; justify-content: center; background-color: #1888fa; color: white; } 测试
登录后复制
推荐：《2021年CSS面试题汇总（最新）》
以上就是CSS元素垂直居中的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2877939.html
