justify-content 控制主轴对齐（水平或垂直），align-items 控制交叉轴对齐（垂直或水平）；两者均需父容器为 flex 且有明确尺寸，配合 center 值可实现完全居中。
justify-content 控制的是主轴方向的对齐
主轴方向由 flex-direction 决定：默认是 row（从左到右），此时主轴是水平方向，justify-content 就管左右对齐；设成 column 后主轴变成垂直方向，它就管上下对齐。
常用值有：flex-start（默认，靠主轴起点）、center（居中）、flex-end（靠终点）、space-between（首尾贴边，中间等距）。
注意：justify-content 对单个子元素生效的前提是——父容器有足够剩余空间。如果子元素宽度占满容器（比如 width: 100%），再设 justify-content: center 也看不出效果。
align-items 控制的是交叉轴方向的对齐
交叉轴永远垂直于主轴。主轴是水平方向时，交叉轴就是垂直方向，align-items 管上下对齐；主轴是垂直方向时，它就管左右对齐。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
align-items是作用在所有子元素上的，不能单独指定某个子项 - 它的默认值是
stretch，会让子元素在交叉轴方向拉满高度（或宽度），这常导致意外撑高 - 要实现垂直居中，必须确保父容器有明确高度（比如
height: 100vh或固定值），否则align-items: center可能无效
真正让一个元素在容器里完全居中：justify-content + align-items 都得设 center
这是最简方案，但依赖两个前提：
- 父容器必须是
display: flex - 子元素不能设置
margin: auto以外的强制尺寸干扰（比如align-self: flex-start会覆盖align-items） - 如果子元素是块级且无宽高限制，它会按内容尺寸渲染，此时居中才可见
示例代码：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 400px; /* 必须有高度 */
}
.item {
width: 100px;
height: 100px;
background: #3498db;
}
align-items 不生效？先检查这几个地方
常见失效原因不是属性写错，而是布局约束没满足：
- 父容器没设
height或min-height，尤其在flex-direction: column下，交叉轴是水平方向，但父容器宽度可能由内容撑开，导致“居中”无从谈起 - 子元素用了
float或position: absolute，脱离了 Flex 格局，align-items对它完全无效 - 父容器设置了
flex-wrap: wrap且子元素换行了，此时align-items仍作用于每一行，但视觉上可能误以为没居中 - 使用了
align-self覆盖了单个子项的对齐方式，优先级高于align-items
真正容易被忽略的是：Flex 居中不依赖子元素是否“有内容”或“有尺寸”，但它极度依赖父容器的尺寸边界和子元素是否还在文档流中。
