绝对定位居中需父容器设position: relative，top/left: 50%按父容器宽高计算，transform: translate(-50%, -50%)按元素自身宽高回退，二者配合才能真正居中。
top/left 的 50% 是按父容器算的
写 top: 50% 和 left: 50% 时，浏览器拿的是**父容器的宽高**去算——但前提是父容器得是“已定位”的（position 值为 relative、absolute、fixed 或 sticky）。如果父容器没设定位，它就往上找，直到 body 或视口，这时候百分比就按整个窗口尺寸算，滚动时元素会飘。
常见错误是只给子元素加 position: absolute，却忘了给包裹它的 <div> 加 position: relative。结果就是居中失效，而且在不同屏幕下偏移量还不一样。
- 父容器设了
position: relative→top: 50%按它高度算 - 父容器是默认
static→ 浏览器跳过它，继续找上层已定位祖先 - 找不到已定位祖先 → 退到视口，
top: 50%就是窗口高度一半
transform: translate(-50%, -50%) 的百分比是按自己算的
transform: translate(-50%, -50%) 里的 -50%，不是父容器的 50%，而是**当前元素自身宽高**的 50%。所以它不依赖你提前知道元素多宽多高，适合文字块、图片、响应式内容等尺寸不确定的场景。
这个特性也意味着：哪怕元素内容动态加载（比如字体还没渲染完、图片还在加载），只要最终尺寸稳定，translate 就能准确回退一半。
立即学习“前端免费学习笔记（深入）”；
- 必须和
top: 50%+left: 50%配合使用，否则只挪左上角，整体偏右下 - 如果元素还用了
scale()或rotate()，要把它们写在同一个transform声明里，比如transform: translate(-50%, -50%) scale(1.2)；分开写会被覆盖 - IE9+ 支持，现代浏览器没问题，但别在高频动画里频繁触发，必要时加
will-change: transform
margin: auto 居中只对固定尺寸生效
margin: auto 配合四边定位（top: 0; right: 0; bottom: 0; left: 0）确实能居中，但它有个硬性前提：子元素必须有明确的 width 和 height 值（不能是 auto、100% 或 fit-content）。
一旦你给一个文字块或 flex 子项套这套写法，它大概率缩成一团贴左上角——因为浏览器无法算出“均分多少 margin”，干脆按最小尺寸渲染。
- 适用场景：图标按钮（
width: 48px; height: 48px）、固定弹窗、SVG 图形 - 不适用：多行文本、自适应图片、
display: inline-block元素 - 注意：父容器尺寸也得是确定的，否则百分比宽高会按视口算，导致意外拉伸
calc() 方案要小心百分比基准混用
用 calc(50% - 200px) 这类写法时，50% 是父容器宽度，200px 是固定值，看起来直观，但容易踩两个坑：
- 如果父容器本身有
padding或border，而你又没在box-sizing里设border-box，那50%算的是 content 区域，减出来的位置可能偏移 - 嵌套多层
transform（比如父容器用了scale(0.9)），会导致子元素的calc()百分比基准被干扰，实际效果和预期不符 - 需要手动维护宽高值，响应式场景下不如
translate灵活
真正复杂的地方不在写法本身，而在定位上下文是否干净——比如父容器有没有意外的 transform、overflow 或 will-change，这些都可能悄悄改掉包含块的计算逻辑。动手前先检查 computed style 里的 “Containing Block” 是谁，比反复调 margin 更省时间。
