margin: auto 在 flex 容器中失效，因需满足块级元素、父为 display: flex、未设 flex 收缩/拉伸属性等前提；常见因父容器未设 align-items/justify-content 或子元素被 flex:1 撑满导致无剩余空间。
margin: auto 在 flex 容器里为什么没用
因为 margin: auto 对 flex 项目生效的前提是：它必须是块级元素，且父容器是 display: flex，同时该元素不能设置 flex 相关收缩/拉伸属性（比如 flex: 0 0 auto 或 flex-shrink: 1）干扰对齐逻辑。
常见错误现象：margin: auto 写了但上下没居中，只左右居中；或者完全没反应——大概率是父容器没设 justify-content 和 align-items，或子元素被 flex: 1 撑满导致无剩余空间可“挤”。
- 确保父容器有
display: flex且明确设了align-items: center（垂直居中）和justify-content: center（水平居中） - 子元素避免写
flex: 1、flex-grow: 1或width/height: 100%，否则会吃掉所有可用空间，margin: auto就没地方发力 - 如果子元素是行内元素（如
<span></span>），先加display: block，否则margin不生效
position: absolute + transform: translateY(-50%) 的兼容性坑
这个组合在 IE9+ 和所有现代浏览器都支持，但容易忽略两个关键点：父容器必须有 position: relative（或其它非 static 值），且子元素必须有明确高度（或能自然撑开），否则 transform: translateY(-50%) 会按自身高度的 50% 偏移，而自身高度为 0 就白偏了。
使用场景：需要兼容老版本 Safari（
立即学习“前端免费学习笔记（深入）”；
- 父容器漏写
position: relative→ 子元素会相对于 viewport 定位，而不是你预期的“父盒子” - 子元素是纯文字、无
height、无padding、无line-height→ 实际高度为 0，translateY(-50%)偏移量为 0 - 如果子元素用了
font-size: 0或white-space: nowrap等影响盒模型的样式，也要检查是否意外压缩了高度
Grid 中 place-items: center 为什么比 flex 更干净
因为 place-items: center 是 justify-items: center 和 align-items: center 的简写，它作用于整个 grid 容器，对所有直接子项统一生效，不依赖子项是否参与 flex 布局，也不受 flex 属性干扰。尤其适合单个子元素居中，代码更少、意图更直白。
性能影响几乎可忽略，但要注意：Grid 布局在 IE 中完全不支持（包括 place-items），所以不能用于需兼容 IE 的项目。
- 只需在父容器上写
display: grid; place-items: center，一行搞定垂直+水平居中 - 子元素无需任何额外样式（不用设
margin、transform，也不用管flex属性） - 如果父容器同时用了
grid-template-areas或grid-template-columns，place-items仍有效，但仅作用于未被显式定位的子项
table-cell 方案现在还值得用吗
不推荐新项目使用。虽然 display: table-cell + vertical-align: middle 能让内容在未知高度容器中垂直居中，但它强制将容器变成表格行为，会破坏语义、影响可访问性（屏幕阅读器可能误读为表格），且无法与 flex/grid 混合布局，响应式调整也更麻烦。
唯一保留它的理由：极少数必须兼容 IE8 及更早版本的后台系统——但这类系统现在基本已淘汰。
- 父容器必须设
display: table，子容器设display: table-cell，缺一不可 -
vertical-align: middle只对table-cell生效，对block或flex元素无效 - 如果子元素是 flex 容器，它的内部对齐不会受外层
table-cell影响，容易产生嵌套混乱
现代项目里，优先选 flex 或 grid，它们语义清晰、调试直观、扩展性强。真正难的不是“怎么居中”，而是当容器高度由内容动态撑开、又叠加了 margin collapse 或 line-height 计算时，如何稳定控制基线——这时候得看具体 DOM 结构，不能只靠一个 CSS 属性蒙过去。
