使用 justify-content 和 align-items 可实现 Flexbox 水平垂直居中：justify-content 控制主轴（水平）对齐，设为 center 实现水平居中；align-items 控制交叉轴（垂直）对齐，设为 center 实现垂直居中；两者结合可使元素在容器内完全居中，需确保容器有明确高度，常用于登录页、卡片布局等场景。
在使用 Flexbox 布局时，水平居中和垂直居中是常见的布局需求。通过 justify-content 和 align-items 两个属性，可以轻松实现内容的居中对齐。下面结合实战说明如何正确使用它们。
1. justify-content 控制主轴方向的对齐（通常是水平方向）
justify-content 用于设置 flex 容器内子元素在主轴（main axis）上的对齐方式。默认主轴是水平方向（row），所以它常用来实现水平居中。
常用值包括：flex-start：左对齐（默认）flex-end：右对齐center：居中对齐space-between：两端对齐，中间间距相等space-around：每个项目两侧间距相等
要实现水平居中，将容器的 justify-content 设置为 center：
.container { display: flex; justify-content: center; /* 水平居中 */}
2. align-items 控制交叉轴方向的对齐（通常是垂直方向）
align-items 用于设置子元素在交叉轴（cross axis）上的对齐方式。当主轴是水平方向时，交叉轴就是垂直方向，因此它控制垂直居中。
立即学习“前端免费学习笔记（深入）”；
常用值有：flex-start：顶部对齐flex-end：底部对齐center：居中对齐stretch：拉伸填满容器（默认）baseline：基线对齐
要实现垂直居中，设置 align-items: center：
.container { display: flex; align-items: center; /* 垂直居中 */}
3. 同时实现水平和垂直居中
如果想让一个或多个子元素在容器中完全居中（既水平又垂直），只需同时使用两个属性：
PicDoc
AI文本转视觉工具，1秒生成可视化信息图
6214 查看详情
.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; /* 确保容器有高度，否则看不出垂直效果 */}
这样，所有子元素会在容器中居中显示，非常适合做登录页、弹窗或欢迎界面的布局。
4. 实战示例：居中的卡片布局
假设我们要创建一个页面，中间显示一张卡片，并水平垂直居中：
欢迎使用 Flex 居中
CSS 样式如下：
.card-container { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.card {width: 300px;height: 200px;background-color: white;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);display: flex;justify-content: center;align-items: center;font-size: 18px;}
这个例子中，外层容器使用 Flex 居中卡片，卡片内部也居中文本，整体视觉非常平衡。
基本上就这些。掌握 justify-content 和 align-items 的作用方向，就能灵活应对大多数居中布局场景。不复杂但容易忽略的是容器必须有明确尺寸（尤其是高度），否则 align-items: center 可能无效。
以上就是如何使用CSS实现Flex水平居中_align-items与justify-content实战的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/990162.html
微信扫一扫 
支付宝扫一扫 
