最直接有效的居中方案是父容器设 display: flex 并同时使用 justify-content: center 和 align-items: center，需确保父容器有高度（如 height: 100vh）、子元素为块级且无 margin: auto 干扰；place-items: center 是等效简写，但 IE 不支持。
flex 容器上同时用 justify-content: center 和 align-items: center
这是最直接有效的方案，但前提是父容器必须是 display: flex，且子元素是该 flex 容器的直接子项。
常见错误是只加了其中一个属性，或忘了给父容器设 display: flex —— 浏览器不会报错，但居中就是不生效。
-
justify-content: center控制主轴（默认是水平方向）上的对齐 -
align-items: center控制交叉轴（默认是垂直方向）上的对齐 - 如果改过
flex-direction（比如设成column），主轴和交叉轴会互换，这时两个属性的作用方向也会跟着变
div.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 需要高度，否则垂直居中无参照 */
}为什么子元素没居中？检查这三点
90% 的“不居中”问题出在以下环节，而不是属性写错了：
- 父容器没有设置
height或min-height，尤其在body或html没撑满视口时，align-items: center缺少垂直方向的可用空间 - 子元素本身设置了
margin: auto，它在 flex 容器里会覆盖align-items的行为，导致意外偏移 - 子元素是
inline元素（如span），默认不占整行也不响应align-items；应确保它是block或flex等块级表现
替代方案：只用 place-items: center
CSS Grid 的 place-items 是 align-items + justify-items 的简写，但它在 flex 容器上也有效（现代浏览器支持），更简洁：
立即学习“前端免费学习笔记（深入）”；
div.container {
display: flex;
place-items: center; /* 等价于 align-items: center; justify-content: center; */
height: 100vh;
}注意：place-items 对 flex 布局的影响仅限于对齐直接子元素，不改变 flex 的主轴/交叉轴逻辑；IE 不支持，如需兼容请回避。
别踩这个坑：嵌套 flex 容器导致双重居中偏移
如果父容器用了 justify-content: center，子容器又自己设了一次，而子容器内部还有 flex 子项，容易因多层居中叠加造成视觉错位。
典型场景：Modal 组件里套了个 flex 居中的内容区，结果内容被“顶到右下角”。这时候要确认哪一层真正需要居中，其余层保持默认对齐（flex-start）。
复杂布局中，居中逻辑越靠近叶子节点越可控；把所有居中都堆在顶层容器，反而难调试。
