用 position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%) 可实现不依赖宽高、不触发回流、IE9+ 兼容的绝对居中，缺一不可；top/left 将元素左上角移至父容器中心，transform 才将其自身中心对齐。
直接用 position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%) 就能实现不依赖宽高、不触发回流、IE9+ 兼容的绝对居中——漏掉任一环节都会偏移。
为什么只写 top: 50% 和 left: 50% 会偏右下
这两个值只是把元素的左上角移到父容器（或视口）中心点，不是整个元素居中。结果是元素右下四分之三区域超出中心，视觉上“卡在右下角”。transform: translate(-50%, -50%) 才是关键补正：它以元素自身宽高（含 border 和 padding）为基准，向左、向上各平移一半，让几何中心真正对齐。
-
top: 50%的 50% 是相对于父容器高度 -
translate(-50%, -50%)的 -50% 是相对于元素自身尺寸——这点极易混淆，但正是它不依赖宽高的根本原因 - 如果子元素是
display: inline，IE11 下transform可能不生效，需先加display: inline-block或block
父容器必须设 position: relative 吗
必须。否则 position: absolute 的子元素会向上查找最近的非 static 定位祖先；找不到就落到 body 或视口，导致居中完全失控。
- 最常用且安全的做法：给父容器加
position: relative - 若父容器已是
position: absolute或fixed，也可用，但要确认布局意图是否允许 - 避免父容器同时有
transform、filter或will-change——它们会创建新的定位上下文，悄悄改变参考系 - 弹窗直接挂载在
body下时，若body没设position: relative，建议改用position: fixed更明确
响应式或嵌套 transform 场景下的隐性陷阱
translate(-50%, -50%) 本身稳定，但一旦祖先元素也用了 transform（比如 scale(0.9) 或 translateY(2px)），当前元素的平移会与之复合计算，导致最终偏移失准。
立即学习“前端免费学习笔记（深入）”；
- 常见表现：模态框在缩放后轻微漂移，或 tooltip 在滚动容器内错位
- 调试方法：临时移除祖先的
transform或transform-style: preserve-3d验证 - 替代方案：当父容器已有
transform时，优先考虑display: flex或display: grid居中（注意兼容性成本） - 若元素宽高为奇数像素（如
width: 101px），亚像素渲染可能导致轻微模糊——这是浏览器光栅化限制，非 bug；可加box-sizing: border-box并显式设偶数宽高缓解
最容易被忽略的是百分比参照系的切换：top/left 看父容器，translate 看自己。写错一个符号（比如拼成 transfrom）或漏掉前缀（其实现在全浏览器都支持无前缀 transform）都可能让居中失效，而错误往往不报错、只“看起来偏了”。
