父容器必须设 position: relative，否则 top/left 的参考系可能错位；推荐使用 top: 50%; left: 50%; transform: translate(-50%, -50%) 组合，它基于元素实际渲染尺寸，兼容动态场景且无需硬编码。
父容器必须设 position: relative
不加这句，top: 50% 和 left: 50% 的参考系会向上查找——可能落到 body 或 html 上，导致元素飞出可视区域。哪怕父容器只是个空 div，也得显式写上 position: relative。它不改变布局流，只提供一个「定位上下文」。漏掉这条是线上项目中最常见的居中失效原因。
top: 50%; left: 50%; transform: translate(-50%, -50%) 是唯一推荐组合
这个三行写法覆盖了所有动态场景：文字换行、图片加载中、SVG尺寸变化、em/rem 缩放、响应式断点切换。关键在于：translate() 的百分比基于元素**当前渲染后的实际宽高**，不是预设值。
- 别用
margin-left: -50px; margin-top: -50px——一旦宽高变，立刻偏移错位 - 别用
calc(50% - 50px)——仍需硬编码尺寸，失去灵活性 - IE9+ 全支持
transform: translate()，无需前缀（IE10+ 才要-ms-transform，但 IE 已淘汰）
警惕 top: 0; bottom: 0; left: 0; right: 0; margin: auto 的隐性陷阱
这个写法看似简洁，但有强约束：
- 子元素必须声明明确的
width和height，否则多数浏览器会撑满父容器 - 内联内容（比如纯文字、
span）在垂直方向上常被忽略margin: auto - 遇到
min-width、max-height或 flex 子项时，行为不可预测，调试成本远高于translate方案
真正容易被忽略的细节：transform 的触发条件
transform: translate(-50%, -50%) 必须作用在已脱离文档流的元素上，也就是必须配合 position: absolute（或 fixed）。如果只写 transform 而没设定位，top/left 不生效，整个居中逻辑就断了。另外，不要给父容器加 transform，否则会创建新的包含块，干扰子元素的定位参考系。
立即学习“前端免费学习笔记（深入）”；
