弹性盒子子元素无法居中，根本原因是父容器未设为flex布局或justify-content、align-items未同时设为center；需确保父元素display: flex、设置明确高度，并统一box-sizing: border-box。
弹性盒子（Flexbox）中子元素无法居中，通常是因为容器没设为 flex 布局，或没正确设置 justify-content 和 align-items。只要父容器是 flex 容器，并且两个属性都设为 center，就能轻松实现水平+垂直居中。
确保父容器是 flex 容器
这是前提。只设置子元素样式没用，必须先让父元素开启 flex 布局：
- 给父元素加
display: flex; - 如果父元素是行内元素（如
span），需先改为块级或 inline-flex - 避免父元素高度为
auto且无内容撑开——居中需要明确的参考高度，比如设height: 100vh或固定值
正确设置 justify-content 和 align-items
这两个属性分别控制主轴和交叉轴对齐。默认主轴是水平方向（row），所以：
-
justify-content: center;→ 水平居中（主轴） -
align-items: center;→ 垂直居中（交叉轴） - 两者要同时设置，缺一不可
- 如果主轴被改成
column，两者的含义会互换，一般不建议改，保持默认更直观
注意子元素的尺寸和 margin 干扰
即使布局设对了，以下情况也会导致“看起来没居中”：
立即学习“前端免费学习笔记（深入）”；
- 子元素设置了
margin（尤其margin-top/margin-left），会偏移视觉中心 - 子元素宽高超出父容器（比如图片没设
max-width: 100%），可能溢出或挤压布局 - 父容器有 padding，而子元素用了
box-sizing: content-box（默认），实际占用空间变大；建议统一用box-sizing: border-box
单个子元素居中可选更简写方式
如果父容器只含一个子元素，也可以不用 flex，但 flex 是最通用可靠的方案。若坚持用 flex，还可配合 flex: 1 或 min-height 提升兼容性：
- 给父容器加
min-height: 100vh;替代height: 100vh;，防止内容少时高度塌陷 - 子元素无需设宽高，flex 居中自动适配；如需固定尺寸，直接设
width/height即可 - 不想影响其他 flex 子项？把居中元素单独包一层 flex 容器，避免全局干扰
