必须给父容器设position: relative，否则绝对定位元素会相对于视口而非父容器居中；top: 50%和left: 50%仅将元素左上角移至中心，须配合transform: translate(-50%, -50%)才能真正居中。
父容器没设 position: relative，居中就失效
绝对定位元素的 top 和 left 百分比值，是相对于“最近的已定位祖先”计算的。如果父容器是默认的 position: static（也就是没写任何 position），浏览器会一路向上查找，最终落到 或视口上——结果就是元素在整页中心，而不是你期望的父框内部。
必须给父容器显式加 position: relative；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% 把**左边缘**拉到水平中线。此时元素的几何中心仍在右下方——它只是“锚点”到了中心，不是“自己站在中心”。
漏掉 transform: translate(-50%, -50%) ，你会看到元素右下角飘出父框，或整体偏右下。这不是偏了，是逻辑上本该如此。
-
transform: translate(-50%, -50%)的百分比是按元素自身宽高算的，所以它不依赖固定尺寸，响应式友好 - 不能写成
left: -50%—— 那是相对于父容器宽度的负向偏移，完全跑偏 - 也不推荐拆成
transform: translateX(-50%) translateY(-50%)，冗余且易被后续 transform 覆盖
为什么不用 top: 0; left: 0; right: 0; bottom: 0; margin: auto
这个写法看似简洁，但有硬性限制：子元素必须有明确的 width 和 height（不能是 auto 或依赖内容撑开）。一旦子元素是 display: inline-block、含图片/文字流，或用了 max-width/min-height，margin: auto 在绝对定位下就失效。
- 它只适用于宽高完全固定的场景（比如弹窗尺寸写死）
- 响应式或 CMS 动态内容下极易错位
- 不需要
position: relative父容器也能工作，但代价是丧失灵活性
动画中合并 transform 声明，否则居中会被覆盖
如果子元素后续要加旋转、缩放等动画，直接写 transform: rotate(45deg) 会覆盖前面的 translate(-50%, -50%)，导致居中瞬间失效。
必须把所有变换合并到一个 transform 声明里：
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg) scale(1.2);
}
- 顺序很重要：
translate应放在最前，避免其他变换影响偏移基准 - IE9 需加
-ms-transform前缀，但现代项目基本可忽略 - 真正容易被忽略的是：这个方案会让子元素脱离文档流，后续兄弟元素会“无视”它的存在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
