必须设position: relative，否则top/left会相对于视口而非父容器；transform: translate(-50%, -50%)是关键，它将左上角在中心的元素反向平移自身宽高一半，实现几何中心对齐。
父容器必须设 position: relative
不加这句，top: 50% 和 left: 50% 就会相对于视口（viewport）计算，而不是你写的那个外层 div。常见错误是直接给子元素写 position: absolute，却忘了给包裹它的父级加定位上下文。
哪怕父容器是 body，也建议显式加 position: relative —— 因为某些重置样式可能清掉了 body 的默认 margin，导致偏移肉眼难察觉；滚动时更明显。
-
position: static（默认值）或没写position，等于没有定位上下文 - 祖先中最近一个
position值为relative、absolute或fixed的元素，才是参考系 - 别依赖
html或body作为隐式参考，它们的行为在不同浏览器/框架里可能不一致
transform: translate(-50%, -50%) 是核心
只写 top: 50%; left: 50% 会让元素左上角落在父容器中心，必须靠 translate 把它往回拉自身宽高的一半。这个“自身”由浏览器实时计算，不管宽高是像素、百分比还是自动（auto），都不用改代码。
容易踩的坑：
- 如果子元素还有
scale(1.2)或rotate(45deg)，必须合并写：例如transform: translate(-50%, -50%) scale(1.2)；分开写会被后一条覆盖，居中失效 - 不要写两行
transform，CSS 只认最后一条声明 - 旧版 iOS Safari（-webkit-transform 前缀，但 2026 年基本可忽略
别用 margin: auto 配四边定位
写法是 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;，看起来简洁，但实际限制极多：
- 子元素必须有明确的
width和height（不能是auto、max-content或未设置） - 父容器尺寸也要可计算，否则 margin 分配无依据
- 在部分低版本安卓 WebView 中行为不稳定，尤其配合
overflow: hidden时 - 一旦子元素内容动态变化（比如文字换行、图片加载后撑开），居中就崩
为什么不用负 margin 手动算？
像 margin-top: -100px; margin-left: -100px 这种写法，前提是你知道子元素宽高固定为 200px。但现代页面大量使用响应式、字体缩放、动态内容，硬编码像素值很快就会错位。
真正麻烦的不是写错，而是维护成本高：每次改宽高都要同步改两个负 margin 值，还容易漏掉其中一个。而 translate(-50%, -50%) 一次写完，后续任何尺寸变化都自动适配。
复杂点在于 transform 层级叠加时的顺序控制，最容易被忽略的是——它和 flex、grid 等布局方式不可混用在同一元素上，因为脱离文档流后，父容器高度塌陷问题会反过来影响你的居中效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
