justify-content控制主轴对齐，align-items控制交叉轴对齐，二者配合可实现元素在容器中的精准居中与分布，如center+center实现完全居中，需确保父容器设为display:flex，主轴方向影响对齐表现。
在CSS Flexbox布局中，justify-content 和 align-items 是两个核心的对齐属性，它们分别控制主轴和交叉轴上的内容排列方式。合理配合使用这两个属性，可以轻松实现元素在容器中的精准居中或对齐。
justify-content：控制主轴方向的对齐
该属性定义了flex项目在主轴（main axis）上的分布方式。主轴的方向由 flex-direction 决定，默认是横向从左到右。
- flex-start：项目靠向主轴起点（默认值）
- flex-end：项目靠向主轴终点
- center：项目在主轴上居中
- space-between：项目均匀分布，首尾项贴边，中间间距相等
- space-around：项目周围空间平均分配
- space-evenly：项目间及边缘的间距完全相等
align-items：控制交叉轴方向的对齐
该属性定义了flex项目在交叉轴（cross axis）上的对齐方式。如果主轴是横向，交叉轴就是纵向。
- flex-start：项目靠向交叉轴起点
- flex-end：项目靠向交叉轴终点
- center：项目在交叉轴上居中
- baseline：项目按基线对齐
- stretch：项目拉伸以填满容器（默认值）
常见组合用法示例
当需要将一个或多个子元素在父容器中完全居中，最典型的写法是：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
这个组合适用于：
- 登录框在页面中央
- 加载动画居中显示
- 卡片内容垂直水平对齐
如果想让项目顶部对齐但水平居中：
.container {
display: flex;
justify-content: center;
align-items: flex-start;
}
注意事项
使用这两个属性前，必须确保父容器设置了 display: flex 或 display: inline-flex，否则属性不会生效。
主轴方向会影响 justify-content 的表现。例如设置 flex-direction: column 后，主轴变为垂直方向，justify-content 就会控制垂直对齐，而 align-items 控制水平对齐。
基本上就这些。掌握这两个属性的配合逻辑，能快速实现大多数居中与对齐需求，是日常布局中最实用的技巧之一。不复杂但容易忽略细节。
