父容器必须设position: relative，否则top: 50%和left: 50%将相对于视口定位；需配合transform: translate(-50%, -50%)实现真居中，且动画时所有transform变换须合并书写。
父容器必须设 position: relative
不加这句，top: 50% 和 left: 50% 就会往上找——找到 <body> 或视口为止，元素就飘到整个页面中心，而不是你写的那个盒子里面。
常见错误是只写子元素样式，父容器留空或只写 width/height。哪怕父容器本身不需要偏移，也得显式声明 position: relative。
-
position: absolute的定位参考系是“最近的已定位祖先”，static（默认值）不算“已定位” -
position: fixed或sticky也能当参考系，但会改变布局行为；relative最稳妥，不影响文档流 - 如果父容器已有
transform，一般不影响定位参考系，除非用了transform-style: preserve-3d
top: 50% + left: 50% 只动左上角
这两行代码的作用，是把元素**左上角**拉到父容器中心点，不是让整个元素居中。结果就是元素右下部分超出容器，看起来像“卡在右下角”。
必须补上 transform: translate(-50%, -50%)，它按元素自身宽高计算偏移量，所以不用管尺寸是否固定、是否响应式。
立即学习“前端免费学习笔记（深入）”；
- 只水平居中？用
left: 50%+transform: translateX(-50%) - 只垂直居中？用
top: 50%+transform: translateY(-50%) - 避免写两行
transform：后写的会覆盖前写的，动画时尤其容易崩
别指望 margin: auto 对 absolute 生效
margin: auto 在绝对定位里基本没用——除非同时设置 left: 0、right: 0、top: 0、bottom: 0，且元素有明确宽高。这种写法兼容性差，IE 不支持，现代项目极少用。
有人试过 text-align: center 或 display: flex 套在父容器上，对 absolute 子元素也无效，因为绝对定位元素已脱离文档流。
- 想用 Flexbox 居中？直接给父容器设
display: flex，然后删掉子元素的position: absolute——这是更现代、更可维护的方案 - 非要保留
absolute（比如做遮罩、tooltip、弹窗），那就老老实实用top/left + transform
动画时 transform 必须合并写
如果元素后续要加旋转、缩放或平移动画，不能分开写 transform 声明。比如先写 transform: translate(-50%, -50%)，再写 transform: rotate(45deg)，后者会完全覆盖前者，居中立刻失效。
所有变换必须写进同一个 transform 值里。顺序会影响最终视觉效果，平移建议放最后，更符合直觉：
- 正确：
transform: rotate(45deg) translate(-50%, -50%) - 也正确但易读性稍差：
transform: translate(-50%, -50%) rotate(45deg) - 错误：
transform: translate(-50%, -50%)和transform: rotate(45deg)分开出现
position: relative ——它不显眼，但缺了整个方案就失效；其次是动画场景下 transform 被覆盖的问题，往往调试半天才发现是 CSS 声明被后写的同名属性干掉了。 
