绝对定位元素居中需父容器设position: relative，再用top: 50%、left: 50%配合transform: translate(-50%, -50%)校正；动画时所有transform操作须合并书写，避免覆盖失效。
绝对定位元素无法靠 margin: auto 或 text-align: center 居中，必须用 top/left 配合 transform 才能真正对齐中心点。
父容器必须设 position: relative
这是最常被跳过的一步。不加这句，top: 50% 和 left: 50% 就会向上查找——最终以 <body> 或视口为参考，滚动时元素会“飘走”。
- 即使父容器本身不需要偏移，也得显式写
position: relative -
position: absolute、fixed、sticky也能当参考系，但会改变布局行为；relative最稳妥，不影响文档流 - 如果父容器已有
transform，一般不影响定位参考系，除非用了transform-style: preserve-3d
top: 50% + left: 50% 只动左上角
这两行代码的作用是把元素的左上角（border-box 原点）拉到父容器中心点，不是让整个元素居中。漏掉后续校正，视觉上必然右偏、下偏，甚至右下角超出容器。
- 必须补上
transform: translate(-50%, -50%)，它按元素自身宽高计算偏移量，不用管尺寸是否固定 - 只水平居中？用
left: 50%+transform: translateX(-50%) - 只垂直居中？用
top: 50%+transform: translateY(-50%)
动画时 transform 必须合并书写
如果后续要加旋转、缩放或平移动画，不能分开写 transform 声明。后写的会完全覆盖前写的，居中立刻失效。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
transform: rotate(45deg) translate(-50%, -50%)（平移放最后更直观） - 错误写法：先写
transform: translate(-50%, -50%)，再单独写transform: rotate(45deg) - 所有变换必须写进同一个
transform值里；顺序会影响最终视觉效果
真正麻烦的不是写法本身，而是嵌套层级中某个祖先悄悄加了 transform 或 preserve-3d，导致定位参考系意外变更——这种问题往往要靠浏览器开发者工具逐层检查 computed styles 才能定位。
