用 position: absolute 配合 top: 50%、left: 50% 和 transform: translate(-50%, -50%) 可靠居中，但父容器必须设 position: relative 提供定位上下文，且 transform 不可被后续声明覆盖。
直接用 position: absolute 配合 top: 50%、left: 50% 和 transform: translate(-50%, -50%) 就能可靠居中，但漏掉任一环节都会偏——尤其父容器没设定位上下文，或后续动画覆盖了 transform 值。
父容器必须有定位上下文（position: relative 最常用）
否则 top: 50% 和 left: 50% 会相对于视口（viewport）计算，元素大概率飞到整页中心，而不是你写的那个盒子里面。
-
position: relative最安全：不改变文档流，只为子元素提供定位参考 -
position: absolute或fixed也能当定位祖先，但容易引发嵌套混乱 - 完全不写
position（即默认static）= 没有定位上下文 = 居中失效
transform: translate(-50%, -50%) 不能省，也不能被覆盖
top: 50% + left: 50% 只是把元素左上角挪到父容器中心点，视觉上明显偏右下；translate(-50%, -50%) 才真正把它“拉回自身宽高一半”的距离，让中心对齐。
- 百分比基于元素自身尺寸，所以无需预知宽高，适合动态内容
- 如果之后加旋转或缩放，必须合并写法，比如
transform: rotate(15deg) translate(-50%, -50%) - 单独再写一条
transform声明（如transform: rotate(15deg)）会完全覆盖前面的居中逻辑
对比 margin: auto 方案：什么情况下会失效
margin: auto 在 position: absolute 下仅当同时满足四个条件才生效：四边 offset 全为 0（top: 0; right: 0; bottom: 0; left: 0）、宽高固定、display 为块级、且父容器有定位上下文。
立即学习“前端免费学习笔记（深入）”；
- 只要子元素宽高未知或由内容撑开，
margin: auto就不会居中，而是撑满整个父容器 - 它不依赖
transform，但灵活性远不如translate组合 - IE8 及更早版本不支持
transform，此时才需退回到margin负值方案（前提是尺寸已知）
最容易被忽略的其实是父容器那行 position: relative ——很多人只盯着子元素写，结果调试半天发现元素飘在页面中央，却没意识到定位参考点根本不在预期位置。
