left: 50% 仅将元素左边缘移至父容器中点，导致右偏；需配合负 margin 或 transform 抵消自身宽高：已知宽度用 margin-left 负半值，未知宽度推荐 transform: translateX(-50%)，兼容老 IE 需 JS 计算。
绝对定位元素用 left: 50% 为什么没真正居中？
因为 left: 50% 是把元素**左边缘**移到父容器水平中点，不是把元素自身中心对齐。结果是元素整体偏右一半自身宽度——看起来明显右偏。
三种可靠修正方式及适用场景
必须配合偏移抵消自身宽高影响。选哪种取决于你是否知道元素尺寸：
- 已知固定宽度（如
width: 200px）：用margin-left: -100px（负值为宽度一半） - 宽度未知但内容简单（纯文本/图标）：用
transform: translateX(-50%)，现代浏览器全支持，推荐首选 - 需要兼容 IE8 及更老版本：改用
left: 50%+margin-left，但得写 JS 动态算偏移（不推荐，维护成本高）
transform: translateX(-50%) 的实际写法和坑
这是目前最简洁可靠的方案，但要注意两点：
- 必须和
left: 50%配合使用，单独transform不起作用 - 如果元素有
transition，transform会触发重绘，可能影响动画性能；可加will-change: transform提前提示渲染引擎 - 不要在 flex 容器里对子项同时用
position: absolute和justify-content: center，行为不可控
div {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
垂直+水平同时居中的写法要不要加 top: 50%？
要。水平居中只靠 left 和 transformX，垂直就得另起一套：top: 50% + transform: translateY(-50%)，或者合并写成 transform: translate(-50%, -50%)。
立即学习“前端免费学习笔记（深入）”；
注意：如果父容器没设置 position: relative 或其它非 static 值，绝对定位元素会相对于初始包含块（通常是视口）定位，导致居中位置错乱。
