父容器必须设position: relative，否则top: 50%和left: 50%会相对于body或视口定位；仅靠这两行只能将元素左上角移至父容器中心，需配合transform: translate(-50%, -50%)实现真正居中，且transform须合并书写、避免覆盖。
父容器必须设 position: relative
不加这句，top: 50% 和 left: 50% 就会往上找——找到 或视口为止，元素就飘到整页中心，而不是你写的那个盒子里面。常见错误是只写子元素样式，父容器留空或只写 width/height。哪怕父容器本身不需要偏移，也得显式声明 position: relative。
注意：position: static（默认值）不算“已定位”，absolute 元素只认最近的、position 值为 relative/absolute/fixed 的祖先。
top: 50% + left: 50% 只动左上角，不是居中
这两行的作用，是把元素**左上角**拉到父容器中心点，不是让整个元素视觉居中。漏掉后续校正，你会看到元素整体偏右下，甚至右下角飘出容器。
- 只水平居中？用
left: 50%+transform: translateX(-50%) - 只垂直居中？用
top: 50%+transform: translateY(-50%) - 必须补上
transform: translate(-50%, -50%)，它按元素自身宽高实时计算偏移量，不用管尺寸是否固定、是否响应式
transform 必须合并书写，不能分多行
如果元素后续要加旋转、缩放或平移动画，不能分开写 transform 声明。比如先写 transform: translate(-50%, -50%)，再写 transform: rotate(45deg)，后者会完全覆盖前者，居中立刻失效。
所有变换必须写进同一个 transform 值里。顺序会影响最终效果，平移建议放最后更符合直觉：
transform: rotate(45deg) translate(-50%, -50%)
transform: translate(-50%, -50%) rotate(45deg)（也正确，但易读性稍差）
别指望 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-style: preserve-3d，可能改变层叠上下文，得实测确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
