flex容器内单个元素水平垂直居中需同时设置justify-content:center和align-items:center；若仅特定子元素居中可用margin:auto；justify-content不生效常见原因是父容器未设display:flex、子元素为inline或脱离文档流；column方向下二者作用轴互换，且容器需有明确高度才能体现align-items:center效果。
flex 容器内单个元素水平垂直居中
直接在容器上同时设置 justify-content: center 和 align-items: center 即可。这两个属性分别控制主轴和交叉轴的对齐，对 display: flex 容器生效。
注意：必须确保父容器是 flex 容器，且子元素没有设置 margin: auto 或其他干扰对齐的样式。
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* 需有明确高度，否则可能看不出垂直居中效果 */
}flex 子元素自身用 margin: auto 居中
当容器已设为 display: flex，但只希望某个特定子元素居中（其余元素不参与对齐），可用 margin: auto。它会自动吸收剩余空间，在两个方向上都起作用。
- 仅对 flex 项目有效，普通块级元素无效
- 不需要设置
justify-content或align-items - 若容器主轴是水平（默认），
margin: auto会同时撑开左右 margin；若主轴是垂直（flex-direction: column），则撑开上下 margin
.container {
display: flex;
height: 300px;
}
.centered-item {
margin: auto;
}justify-content center 不生效的常见原因
看起来写了 justify-content: center 却没反应，大概率是以下情况之一：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
display: flex—— 这是最常见的遗漏 - 子元素是
inline元素（如<span>）且未设width，导致“居中”视觉上不明显 - 子元素设置了
float或position: absolute，脱离了 flex 布局流 - 容器宽度不足或被内容撑开，实际没有剩余空间可分配
align-items center 在 column 方向下表现不同
当 flex 容器设为 flex-direction: column 时，主轴变为垂直方向，此时：
-
justify-content: center控制的是**垂直方向**居中（原主轴） -
align-items: center控制的是**水平方向**居中（原交叉轴） - 两者仍需同时使用才能实现完全居中，但语义角色互换了
.container {
display: flex;
flex-direction: column;
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中 */
height: 300px;
}真正容易被忽略的是：如果容器没有设定明确高度（比如只靠内容撑开），align-items: center 在垂直方向就几乎看不出效果——因为容器高度刚好等于子元素高度，没空间可“居中”。加个 min-height 或固定 height 才能验证是否生效。
