最直接有效的居中方案是父容器设 display: flex 并同时使用 justify-content: center 和 align-items: center，需确保父容器有高度（如 height: 100vh）、子元素为块级且无 margin: auto 干扰；place-items: center 是等效简写，但 IE 不支持。
flex 容器上同时用
和
这是最直接有效的方案，但前提是父容器必须是
，且子元素是该 flex 容器的直接子项。
常见错误是只加了其中一个属性，或忘了给父容器设
——
浏览器
不会报错，但居中就是不生效。
控制主轴（默认是水平方向）上的对齐
控制交叉轴（默认是垂直方向）上的对齐
如果改过
（比如设成
），主轴和交叉轴会互换，这时两个属性的作用方向也会跟着变
为什么子元素没居中？检查这三点
90% 的“不居中”问题出在以下环节，而不是属性写错了：
父容器没有设置
或
，尤其在
或
没撑满视口时，
缺少垂直方向的可用空间
子元素本身设置了
，它在 flex 容器里会覆盖
的行为，导致意外偏移
子元素是
元素（如
），默认不占整行也不响应
；应确保它是
或
等块级表现
替代方案：只用
CSS Grid 的
是
+
的简写，但它在 flex 容器上也有效（现代浏览器支持），更简洁：
立即学习
“
前端免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
注意：
对 flex 布局的影响仅限于对齐直接子元素，不改变 flex 的主轴/交叉轴逻辑；IE 不支持，如需兼容请回避。
别踩这个坑：嵌套 flex 容器导致双重居中偏移
如果父容器用了
，子容器又自己设了一次，而子容器内部还有 flex 子项，容易因多层居中叠加造成视觉错位。
典型场景：Modal 组件里套了个 flex 居中的内容区，结果内容被“顶到右下角”。这时候要确认哪一层真正需要居中，其余层保持默认对齐（
）。
复杂布局中，居中逻辑越靠近叶子节点越可控；把所有居中都堆在顶层容器，反而难调试。
justify-content: centeralign-items: centerdisplay: flexdisplay: flexjustify-content: centeralign-items: centerflex-directioncolumndiv.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 需要高度，否则垂直居中无参照 */
}heightmin-heightbodyhtmlalign-items: centermargin: autoalign-itemsinlinespanalign-itemsblockflexplace-items: centerplace-itemsalign-itemsjustify-itemsdiv.container {
display: flex;
place-items: center; /* 等价于 align-items: center; justify-content: center; */
height: 100vh;
}place-itemsjustify-content: centerflex-start