必须给父容器显式设position: relative，否则绝对定位元素会相对于视口居中而非父容器；top: 50%和left: 50%仅将元素左上角移至中心，须配合transform: translate(-50%, -50%)才能真正居中。
父容器没设 position: relative，居中就失效
绝对定位元素的 top 和 left 是相对于“最近的已定位祖先”计算的。如果父容器是默认的 position: static（也就是没写任何 position），浏览器会一路往上找，最终落到 或视口上——结果就是元素在整页中心，而不是你期望的盒子内部。
必须给父容器显式加 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）
transform: translate(-50%, -50%) 不是可选项，是必要校正步骤
top: 50% 和 left: 50% 只是把元素的**左上角**拉到父容器中心点，不是让元素“自己居中”。漏掉 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);（后者更直观） - 用 CSS 变量或 JS 动态改
transform时，也要注意拼接逻辑，别丢掉居中偏移
比 flex 居中更适用的场景有哪些
虽然 display: flex + justify-content/align-items 更简洁，但 absolute + transform 在这些情况下不可替代：
- 需要脱离文档流，不占空间（比如浮层、提示框、加载遮罩）
- 父容器高度不固定，且不能设
min-height（flex 有时需额外 hack） - 项目要兼容 IE9 或更低（flex 在 IE9 完全不支持）
- 配合
z-index做层级控制，且父容器本身已是定位元素
真正容易被忽略的是：这个方案对宽高动态变化的元素依然稳定，但如果你用 margin 负值模拟居中，一旦内容变长或字体缩放，立刻失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
