必须配 top: 50% 和 left: 50% 才能实现居中，因为 transform: translate(-50%, -50%) 是相对于自身宽高偏移，需先用 top/left 将元素边缘定位到父容器中线，再通过 translate 回拉自身宽高的一半完成中心对齐。
用 transform: translate(-50%, -50%) 居中绝对定位盒子，为什么必须配 top: 50% 和 left: 50%
因为 transform 的偏移是相对于元素自身尺寸计算的，不是相对于父容器。只写 transform: translate(-50%, -50%) 不起作用——它没触发位移基准点的重置。
常见错误现象：div 没动、跑出视口、或只水平居中但垂直偏上/下。
-
position: absolute是前提，否则top/left无效 -
top: 50%把元素上边缘拉到父容器垂直中线，left: 50%把左边缘拉到父容器水平中线 - 此时元素中心点还在右下方向，所以用
translate(-50%, -50%)把它往左、往上各拉自己宽高的一半 - 注意：百分比单位在
translate()中是相对于元素自身宽高，不是父容器
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
flex 布局里还用 transform 居中？没必要，但要注意 justify-content 和 align-items 的作用对象
Flex 容器内部子项居中，直接用 justify-content: center + align-items: center 更可靠，且不依赖定位上下文。
容易踩的坑：把 justify-content 写在子元素上，或误以为它能影响绝对定位子项。
- 这两个属性只对 flex 容器的**直接子项**生效，且子项不能是
position: absolute - 如果子项用了
position: absolute，它就脱离了 flex 流，justify-content对它完全无效 - flex 居中不改变盒模型，不会影响
margin、padding或box-sizing计算
margin: auto 在什么条件下能居中定位盒子？只对非 static 定位且宽高固定的块级元素有效
很多人试过 margin: auto 失败，是因为它在绝对定位下只有满足特定条件才起作用。
使用场景有限：仅当元素同时满足「有明确宽高」+「left 和 right 均为具体值（如 0）」时，margin: auto 才会水平居中；垂直方向同理需 top/bottom 都设值。
-
position: absolute+width+height+left: 0+right: 0+margin: auto→ 水平居中 - 要垂直也居中，还得加
top: 0+bottom: 0 - 缺点明显：无法响应式（宽高必须固定），IE8 不支持
margin: auto在绝对定位中的这种用法 - 性能上无差异，但可维护性差，一改宽高就得同步调
left/right
为什么 transform 居中在缩放或动画时更稳？因为它绕过了盒模型重排
用 top/left + transform 组合，浏览器只触发重绘（repaint），而纯 top/left 变动会触发重排（reflow）——尤其在动画中，这直接影响帧率。
兼容性方面，transform 在现代浏览器中无问题，但 IE9+ 才支持 2D translate，IE8 及以下必须回退到 JS 计算偏移或负 margin。
- 如果盒子内容动态变化（比如文字增减导致宽高变），
transform居中依然准确，不需要重新计算margin - 但要注意：若父容器有
transform、perspective或filter，可能创建新的层叠上下文，影响z-index行为 - 移动端 Safari 对
transform的硬件加速更友好，但老 Android WebView 可能有闪烁，建议加will-change: transform提前提示
position: relative ——没有它，top: 50% 会一直往上找最近的定位祖先，最终可能相对于 body 或视口定位，而不是你预期的“那个 wrapper”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
