因为top: 50%和left: 50%仅将元素左上角移至父容器中心，未补偿自身宽高，故视觉上偏右下；必须配合transform: translate(-50%, -50%)反向偏移自身尺寸一半才能精准居中，且父容器需设position: relative以确保定位上下文正确。
为什么 top: 50%; left: 50% 总是偏右下？
因为 top: 50% 和 left: 50% 只把元素的左上角移到父容器中心点，不是让整个元素视觉居中。你看到的“偏右下”，其实是元素自身宽高没被补偿的结果。
必须加 transform: translate(-50%, -50%) —— 它让元素以自身尺寸为基准，向左、向上各挪一半，才能真正对齐中心。
- 漏写这行，100% 偏移；写了但拼错（比如
translate(-50, -50)缺少百分号），同样失效 - 如果元素同时有
scale(1.2)或rotate(5deg)，要合并写：transform: translate(-50%, -50%) scale(1.2)，否则后写的会覆盖前写的 -
transform的百分比始终按元素自身 content box 计算，跟父容器尺寸无关，这点很稳
父容器没设 position: relative 就一定会飘
绝对定位元素找“最近的已定位祖先”作为参考系。position: static（默认值）不算，position: relative 才是安全选择。
常见翻车场景：直接给子元素加 position: absolute，父 <div> 连 class 都没加，更别说 position: relative —— 此时参考系变成 <body> 或视口，滚动时明显偏移。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否显式写了
position: relative（哪怕只是空规则：.parent { position: relative; }） - 别依赖
<body>当定位上下文：它可能被重置样式影响（比如缺失margin: 0导致额外偏移） - 如果父容器本身用了
transform（如缩放），一般不影响，但若设了transform-style: preserve-3d，需实测层叠行为
margin: auto 居中为啥有时不管用？
margin: auto 在绝对定位里能居中，但条件苛刻：必须同时满足 top: 0、right: 0、bottom: 0、left: 0，且子元素要有明确的 width 和 height。
一旦宽高是 auto、max-width、百分比（除非父容器尺寸也固定），或者内容动态换行，margin: auto 就会失效或只水平居中。
- 适用场景很窄：弹窗、图标按钮等尺寸固定的脱离文档流元素
- 不要和
top/left混用——margin: auto会忽略你写的top值 - 兼容性略低：
inset: 0; margin: auto更语义化，但 Chrome 89+ / Firefox 66+ 才支持，基础项目慎用
亚像素偏差导致 1px 错位怎么办？
现代浏览器对小数像素的舍入策略不同，transform: translate(-50%, -50%) 在高缩放比或某些 GPU 渲染路径下，可能出现肉眼可见的 1px 偏差。
这不是写法错误，而是渲染机制限制。别硬调 translate(-49.9%, -49.9%) 这种魔数——它在不同设备上表现不一致。
- 优先确认是否真有偏差：用 DevTools 放大看，排除设计稿误差或字体渲染干扰
- 若必须像素级精准，改用负 margin 方案（需知道宽高）：
margin: -20px 0 0 -60px（假设高 40px、宽 120px） - 高频动画中可加
will-change: transform提示渲染引擎，但别滥用，否则触发不必要的图层提升
position: relative，子元素漏 transform: translate(-50%, -50%)。其他问题基本都绕不开这两条。 
