使用 justify-content 和 align-items 可实现居中。设置 display: flex 的容器通过 justify-content: center 实现水平居中，align-items: center 实现垂直居中，需确保容器有高度（如 height: 100vh），支持单个或多子元素整体居中，方法简洁兼容现代浏览器。
使用 CSS Flexbox 实现水平居中和垂直居中非常简单，只需要在容器上设置几个关键属性即可。下面介绍具体实现方法。
1. 使用 justify-content 和 align-items
Flexbox 提供了两个核心属性来控制主轴和交叉轴上的对齐方式：
justify-content: center —— 实现子元素在主轴（默认为水平方向）上的居中align-items: center —— 实现子元素在交叉轴（默认为垂直方向）上的居中
将这两个属性同时应用在父容器上，即可实现子元素的水平垂直居中。
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; / 确保容器有高度 /
}
2. 容器需要有明确的高度
为了使垂直居中生效，父容器必须具有可计算的高度。常见做法是设置固定高度、视口高度或由内容撑开。
立即学习“前端免费学习笔记（深入）”；
TextCortex
AI写作能手，在几秒钟内创建内容。
62 查看详情 使用 height: 100vh 可让容器占满整个视口高度也可以用 min-height 避免内容超出时出现问题
3. 支持多个子元素居中
如果容器中有多个子元素，它们会一起在主轴上居中排列。若希望每个子元素独立垂直居中，该方法依然有效。
例如：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
无论内部是一个 div 还是多个 inline 元素，都会整体居中显示。
基本上就这些。只要设置 display: flex 并配合两个对齐属性，就能轻松实现居中效果，兼容现代浏览器，代码简洁可靠。
以上就是如何通过css flexbox实现水平居中和垂直居中的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1019077.html
微信扫一扫 
支付宝扫一扫 
