父容器必须设 position: relative；否则 absolute 子元素会向上寻找已定位祖先，导致居中失效。唯一可靠居中方案是 top: 50% + left: 50% + transform: translate(-50%, -50%)，其中 transform 按自身尺寸计算偏移，兼容动态内容。
父容器必须设 position: relative
不加这句，position: absolute 的子元素会往上找最近的已定位祖先——大概率落到 body 或 html 上，居中完全偏移。哪怕父容器只是个空 div，也得显式写 position: relative；它本身不改变布局，只提供定位上下文。
top: 50% + left: 50% + transform: translate(-50%, -50%)
这是唯一无需预知宽高的可靠组合：
-
top: 50%和left: 50%把元素左上角挪到父容器中心点 -
transform: translate(-50%, -50%)是关键：它按元素自身尺寸计算偏移，不是父容器的，所以文字换行、em缩放、动态图片都稳 - 别用
margin-left: -Xpx替代translateX(-50%)——一旦宽高是auto、max-content或响应式变化，负值立刻失效
避开 top: 0; bottom: 0; left: 0; right: 0; margin: auto 这个坑
这个写法表面简洁，但实际限制极多：
- 子元素必须有明确的
width和height，否则在 Chrome/Firefox 中会撑满父容器 - 对
display: inline-block或含内联文本的元素，垂直方向的margin: auto常被忽略 - 受
min-width、max-height、box-sizing等影响，行为不可预测，调试成本远高于transform方案
只居中一个方向时的简化写法
如果只要水平居中：left: 50%; transform: translateX(-50%)；只要垂直居中：top: 50%; transform: translateY(-50%)。两者都省略了另一方向的声明，避免意外覆盖。
立即学习“前端免费学习笔记（深入）”；
真正容易漏掉的只有父容器的 position: relative ——其他部分写错通常立刻可见，但漏掉这一句，元素可能飞到页面任意角落，而且看不出哪里写错了。
