absolute元素用left:50% top:50%偏右下因定位的是左上角；需配合transform:translate(-50%,-50%)反向平移自身宽高50%才能真正居中，且该百分比基于元素自身尺寸。
absolute 元素用 left: 50% top: 50% 后偏右下角
这是因为 left: 50% 和 top: 50% 是把元素**左上角**定位到父容器中心点，不是整个元素居中。视觉上明显偏右下，尤其在宽高不一时特别明显。
解决核心：先用 left: 50% + top: 50% 把左上角“锚”到中心，再用 transform: translate(-50%, -50%) 反向平移自身宽高的 50%。
-
translate(-50%, -50%)中的百分比是相对于元素自身尺寸计算的，不是父容器 - 必须同时写
left/top和transform，缺一不可 - 不需要知道元素具体宽高，适合动态内容或响应式场景
transform 居中必须配合 position: absolute 吗
不是必须，但常见组合是：position: absolute + left/top: 50% + transform: translate(-50%, -50%)。单独用 transform 无法脱离文档流，会和其他元素重叠或影响布局。
- 如果父容器是
display: flex，直接用justify-content: center; align-items: center更简单，无需absolute - 如果要脱离文档流（比如弹窗、提示气泡），
absolute是合理选择，此时transform是最可靠居中手段 - 避免用
margin: -Xpx手动反推，宽度变化时容易错位
IE 下 transform: translate(-50%, -50%) 不生效怎么办
IE9+ 支持 transform，但需要加 -ms- 前缀；IE8 及以下完全不支持，且无优雅降级方案。
立即学习“前端免费学习笔记（深入）”；
- IE9/10 需补全：
-ms-transform: translate(-50%, -50%) - 现代写法建议按顺序写：
transform: translate(-50%, -50%)放最后，确保覆盖前缀版本 - 如果必须兼容 IE8，改用
margin计算（仅限固定宽高）：margin: -20px 0 0 -30px（假设宽 60px、高 40px） - 注意：IE 下
transform对inline元素行为异常，确保元素是block或inline-block
.centered {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
居中本身不难，难的是记住 translate 的百分比参照物是元素自己，不是父容器——这点漏掉，调十分钟也白调。 
