父容器需有明确高度和定位上下文才能实现嵌套居中：flex/grid要求父容器设height，绝对定位需非static祖先，中间层float/overflow/display会破坏对齐，transform居中易被overflow截断，place-items不穿透display阻隔层。
先看父容器有没有高度和定位上下文
嵌套居中失效，八成卡在第一层：父容器没高度、没形成定位上下文，子元素再怎么设 top: 50% 或 align-items: center 都是浮在空气里。打开开发者工具，选中最外层容器，检查 Computed 面板里的 height 和 display 值——常见坑是：height: auto 却期望垂直居中，或 display: block 下直接套 flex 子项却忘了设高度。
必须满足的硬条件：
- 用
flex或grid居中时，父容器需有明确高度（比如height: 100vh或min-height: 100vh） - 用绝对定位时，最近的非
static定位祖先必须存在（即至少一层设了position: relative） - 用
margin: 0 auto水平居中，父容器得是常规流（不能是flex或grid的直接子容器，否则自动 margin 失效）
中间层是否意外“吃掉”对齐能力
嵌套越深，中间层越容易成为隐形障碍。比如你给外层设了 display: flex; justify-content: center; align-items: center，但中间层用了 float: left 或 position: absolute，它就脱离文档流，不再参与 flex 对齐；或者中间层设了 overflow: hidden，却没意识到它会截断 transform 偏移后的渲染区域。
排查要点：
立即学习“前端免费学习笔记（深入）”；
- 选中每一层中间容器，在
Styles面板里搜position、float、display、overflow - 若中间层只是透传容器、无边框/背景/内边距，可尝试加
display: contents让它从布局树“消失”，让最内层直接受外层flex或grid控制（注意：IE 不支持） - 若中间层必须保留视觉样式（比如带阴影的卡片），那就老老实实每层都设对齐——别指望“跳过”它
transform(-50%, -50%) 被父级 overflow 截断
用 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) 是最容错的居中方案，但极易被中间层的 overflow: hidden 或 overflow: auto 截掉一半。现象是：内容只显示左上角，或完全看不见。
验证方法很简单：
- 临时删掉所有中间层的
overflow声明，看是否恢复显示 - 如果必须保留滚动或裁剪，就把
transform改成margin-left: -宽的一半; margin-top: -高的一半（前提是宽高固定） - 更稳妥的做法：把
position: absolute上移到离最内层最近的那个、且overflow安全的父容器上
grid 的 place-items 是否被中间层 display 干扰
place-items: center 看似能“穿透”多层，实际只作用于直接子元素。如果中间层是 display: block，那它就是 grid 的唯一子项，居中的是这个块，不是最内层内容。
真正起效的前提：
- 外层设
display: grid，中间层设display: contents（让它不生成盒） - 或中间层也设
display: grid并继续place-items: center，逐层向下传递 - 若中间层用了
display: flex，它内部的对齐由justify-content和align-items控制，和外层 grid 无关
嵌套越深，越不能假设“一个属性打全场”。每一层的 display 类型都在重定义布局上下文，得一层层点开开发者工具去看，而不是靠猜。
