绝对定位居中需父容器有定位上下文；top:50%+left:50%将元素左上角移至父中心，transform:translate(-50%,-50%)再反向偏移自身宽高一半实现精确居中。
能居中，但必须确保父容器有定位上下文，否则 absolute 会相对于视口偏移，而不是你想要的“父盒子中心”。
为什么 top: 50%; left: 50%; transform: translate(-50%, -50%) 能居中？
它分两步：先用 top 和 left 把元素左上角挪到父容器中心点，再用 transform 向左上各拉回自身宽高的一半。关键在于——transform 的百分比是相对于元素自身尺寸计算的，不依赖父容器宽高，所以子元素尺寸未知也没关系。
常见错误现象：
• 元素飞到页面左上角外侧（父容器没设 position: relative）
• 居中后轻微抖动（transform 触发重绘，但通常可忽略）
• 在 Safari 旧版本中偏移不准（需加 -webkit-transform 前缀）
- 必须给父容器设置
position: relative、absolute或fixed，否则absolute子元素会逐级往上找，最终相对于body或视口定位 -
transform: translate(-50%, -50%)中的-50%是相对于该元素自身的width和height，不是父容器的 - 如果子元素是图片或含内联内容，注意
vertical-align可能引入额外基线偏移，建议显式设vertical-align: top或用display: block
对比其他居中方式：为什么不用 margin: auto？
margin: auto 对 absolute 元素只在「已知宽高 + 四边 offset 全设为 0」时才生效（即 top/right/bottom/left: 0），此时浏览器会按块级规则居中，但一旦宽高未知，它就失效了——浏览器无法算出 margin 值。
立即学习“前端免费学习笔记（深入）”；
-
margin: auto在absolute下仅当四边都为0且宽高确定时才触发居中逻辑 - 若只设
top: 0; bottom: 0; left: 0; right: 0但没设宽高，元素会撑满整个父容器，不是居中 - Flex 或 Grid 居中更现代，但若父容器已有定位流、不能改布局模型，
absolute + transform是最轻量解法
兼容性与性能要注意什么？
transform 在所有现代浏览器中支持良好（IE9+），但旧版 Android Webview（4.3 及更早）对 translate 百分比支持不稳定；性能上，transform 触发的是合成层（compositor），比直接改 top/left 更高效，适合动画场景。
- IE9 需加
-ms-transform: translate(-50%, -50%)，IE8 及以下完全不支持此方案 - 若元素含大量子节点或频繁重排，
transform仍比top/left更优，因不触发 layout - 避免在
transform中混用px和%（如translate(-50%, -20px)），会导致部分浏览器解析异常
真正容易被忽略的点是：父容器是否真的构成了定位上下文。很多人写了 absolute 却忘了加 position: relative，结果盒子飘到整个页面中央，还以为是 CSS 算错了。
