必须给父容器设position: relative，否则绝对定位元素会相对于视口而非父容器居中；top:50%和left:50%仅将元素左上角移至中心，须配合transform: translate(-50%, -50%)才能真正居中。
父容器没设 position: relative，居中就失效
绝对定位元素的 top 和 left 是相对于“最近的已定位祖先”计算的。如果父容器是默认的 position: static（即没写任何 position），浏览器会一路往上找，最终落到 <body> 或视口上——结果就是元素在整页中心，而不是你期望的盒子内部。
必须给父容器显式加 position: relative（哪怕它本身不需要偏移）；position: absolute、fixed、sticky 也行，但 relative 最安全，不影响文档流。
- 错误写法：
.parent { }（空样式） +.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } - 正确写法：
.parent { position: relative; }，再加子元素样式 - 如果父容器已有
transform，通常不影响子元素的定位参考系（除非用了transform-style: preserve-3d）
top: 50% 和 left: 50% 只移动左上角，不是居中
top: 50% 和 left: 50% 的作用，是把元素的**左上角**（border-box 原点）拉到父容器中心点。这不是“让元素居中”，而是“让锚点落在中心”——漏掉后续校正，你会看到元素整体偏右下，甚至右下角飘出容器。
transform: translate(-50%, -50%) 的百分比是按元素自身宽高算的，所以它不依赖固定尺寸，响应式友好。
立即学习“前端免费学习笔记（深入）”；
- 只写
top: 50%; left: 50%→ 左上角在中心，视觉错位 - 写了
transform: translate(-50%, -50%)→ 中心点对齐中心点 - 只想水平居中？可用
transform: translateX(-50%)，省去垂直计算
动画中合并 transform 声明，否则会被覆盖
如果元素后续要加旋转、缩放等动画，直接写 transform: rotate(10deg) 会完全覆盖前面的 translate，导致居中崩掉。
必须把所有变换写进同一个 transform 声明里。顺序会影响最终效果（平移建议放最后）：
- 错误：
transform: translate(-50%, -50%);→ 后续又写transform: rotate(45deg); - 正确：
transform: rotate(45deg) translate(-50%, -50%);或transform: translate(-50%, -50%) rotate(45deg);（后者更直观）
为什么不用 margin 负值而选 transform
margin 负值方案要求元素宽高固定，且需手动计算：margin: -height/2 0 0 -width/2。一旦内容动态（比如文字换行、字体加载延迟、响应式缩放），偏移量立刻不准。
transform: translate(-50%, -50%) 不触发重排（reflow），仅影响重绘（repaint）和合成，性能更优；IE9+ 全支持，现代项目可放心用。
- 兼容 IE8 及以下？才考虑
margin方案（极少数场景） - Flexbox 居中（
display: flex; justify-content: center; align-items: center）更简单，但 IE10/11 有 bug，IE9 及以下不支持
position: relative，整个居中逻辑就脱离预期。别依赖“看起来差不多”，检查 computed styles 里的 offsetParent 才算真正确认。 
