父容器必须设 position: relative，否则子元素的 top: 50% 和 left: 50% 会相对于视口定位而非父容器；transform: translate(-50%, -50%) 按自身宽高计算，确保精准居中且响应式。
父容器必须设 position: relative
否则 top: 50% 和 left: 50% 会向上找最近的已定位祖先，最终落到视口上——元素就飘到整个页面中心，而不是你写的那个盒子内部。
常见翻车写法：.parent { }（空样式） + .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
-
position: relative最安全，不脱离文档流，也不影响布局 -
position: absolute或fixed也行，但得确认父容器本身定位逻辑是否合理 - 如果父容器已有
transform，一般不影响子元素定位参考系；但若用了transform-style: preserve-3d，可能改变层叠上下文，需实测
transform: translate(-50%, -50%) 的百分比是按自身算的
这个细节决定它能不能响应式居中：-50% 指的是元素自己的宽高，不是父容器的。所以哪怕内容动态换行、字体加载延迟、缩放变化，它依然准。
- 只写
top: 50%; left: 50%→ 左上角在父容器中心，视觉上右偏下偏 - 只水平居中？用
transform: translateX(-50%)更轻量 - 后续要加旋转或缩放？必须合并写进同一个
transform声明，否则会被覆盖：比如transform: rotate(45deg) translate(-50%, -50%)
和 Flex/Grid 混用时容易失效
如果父容器已经是 display: flex 或 display: grid，再给子元素加 position: absolute + transform 居中，逻辑上没问题，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 子元素已脱离文档流，
justify-content/place-items对它完全无效 - 别误以为“父容器居中了”，就省掉子元素的
position: absolute—— 它还在普通流里，transform只是视觉偏移，不改变布局位置 - 若父容器高度靠内容撑开，而子元素又绝对定位，可能造成父容器“塌陷”，看起来像没居中
IE9+ 支持，但旧版 Safari 要加前缀
transform 在 IE9 开始支持，但旧版 Safari（iOS 8–9、macOS Safari 6–8）需要 -webkit-transform。
- 单页应用或现代项目可直接用原生
transform - 仍需兼容 iOS 9 或更早版本？得补前缀：
-webkit-transform: translate(-50%, -50%) - 注意：autoprefixer 能自动处理，但得确认构建配置里启用了对应浏览器版本目标
position: absolute 的子元素会失去垂直锚点参考——尤其在 Flex/Grid 父容器里，align-items: center 失效后，人第一反应常是去调子元素，其实该看父容器有没有 height 或 min-height。 
