使用Flexbox实现居中需设置父容器display: flex，justify-content: center实现水平居中，align-items: center实现垂直居中，容器需有明确高度，如100vh。
在CSS中，使用Flexbox实现元素的垂直和水平居中非常简单，主要依靠 justify-content 和 align-items 两个属性的配合。
1. 基本原理：justify-content 与 align-items 的作用
要实现居中，先理解这两个属性分别控制什么方向：
justify-content：控制主轴（main axis）上的对齐，通常是水平方向（row）align-items：控制交叉轴（cross axis）上的对齐，通常是垂直方向
当容器的 flex-direction 为 row（默认值）时，主轴是水平的，交叉轴是垂直的。
2. 实现垂直和水平居中的代码
给父容器设置以下样式即可让子元素居中：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 确保容器有高度 */
}
此时，所有直接子元素会在容器中水平和垂直居中。
Type
生成草稿，转换文本，获得写作帮助-等等。
83 查看详情 
3. 实际应用场景示例
比如你想让一个登录框在整个页面居中：
CSS 部分：
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.login-box {
width: 300px;
height: 200px;
background: #fff;
border: 1px solid #ddd;
text-align: center;
}
这样无论屏幕大小如何变化，.login-box 都会保持在视口正中央。
4. 注意事项
父容器必须有明确的高度（如 height: 100vh 或固定值），否则 align-items: center 可能无效display: flex 必不可少，这是开启 Flexbox 布局的前提如果子元素是多行，可结合 align-content 使用，但单个项目用 align-items 就够了
基本上就这些。只要记住 justify-content 控制水平、align-items 控制垂直，再配上 flex 容器，居中就不难了。
以上就是如何在CSS中实现Flex元素垂直和水平居中_justify-content align-items结合的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/948568.html
微信扫一扫 
支付宝扫一扫 
