transform: translate(-50%, -50%) 配合 position: absolute 是兼容性最稳的居中方案，但需父容器显式设 position: relative（或 absolute/fixed），否则参照 body 定位；注意 transform 百分比按自身宽高计算，且父级 transform 会叠加导致偏移，调试时应检查 computed style 中的 transform 值。
直接用 transform: translate(-50%, -50%) 配合 position: absolute 是目前兼容性最稳、行为最可预测的居中方案，IE10+ 和所有现代浏览器都支持，无需 polyfill。
父容器没设 position: relative 就失效
这是最常踩的坑：子元素写了 top: 50% 和 left: 50%，但看起来偏右下或“差不多居中”，实际是相对于 <body> 定位了。因为 position: absolute 的参照物是最近的「已定位祖先」，而默认 position: static 不算已定位。
- 必须给父容器显式加
position: relative（或absolute/fixed） - 如果父容器本身是
flex或grid，也得加——别以为布局方式自动提供定位上下文 - 嵌套弹窗场景中，中间某层容器漏了
position: relative，会导致深层子元素漂移
transform 的百分比是按自身宽高算的
这点决定了它不依赖固定尺寸，但也会带来隐性陷阱：当元素宽高由内容撑开（比如 width: fit-content 或未设 height 的文本块），translate(-50%, -50%) 依然生效；可一旦祖先有 transform（如 scale(0.9) 或 translateY(2px)），当前元素的 transform 计算会叠加，导致居中偏移。
- 避免在父级或 body 上滥用
transform，尤其不要和scale()混用 - 若必须缩放，优先用
zoom或font-size缩放整页，而不是transform: scale() - 调试时可用浏览器开发者工具检查 computed style 中的
transform值是否为预期的像素级整数
响应式断点里要重置 top 和 left 值
单纯靠 transform 只能修正偏移量，不能控制垂直位置。比如表单在移动端需居顶、桌面端才居中，就得在媒体查询里调整 top。
立即学习“前端免费学习笔记（深入）”；
- 示例：
@media (min-width: 768px) { #form { top: 100px; } } - 别只改
transform，它不负责定位起点，只负责微调 - 如果垂直位置要随视口动态变化（如始终距顶部 20vh），用
top: 20vh而非 JS 计算
真正容易被忽略的是：这个方案看似简单，但只要有一层祖先元素意外触发了「包含块变更」（比如 overflow: hidden + transform 组合），就可能让 position: absolute 的参照系悄悄切换——这时 translate 还在按原逻辑算，结果就偏了。
