transform居中更可靠，因left/top 50%仅使元素左上角达中心，需translate(-50%,-50%)回拉自身宽高一半；该法无需预知尺寸、兼容IE9+，而margin负值依赖固定宽高且易失效。
绝对定位 + transform 居中为什么比 left/top 50% 更可靠
单纯用 left: 50% 和 top: 50% 只会让元素左上角落在视口中心，不是真正居中。必须配合 transform: translate(-50%, -50%) 把自身宽高的一半“拉回来”。这是目前最通用、无需知道元素尺寸的方案。
- 适用于未知宽高的
div、弹窗、加载动画等动态内容 - 兼容所有现代浏览器（包括 IE9+）
- 避免使用
margin-left/margin-top负值——它要求你提前知道宽高，一改就崩
HTML 结构和 CSS 必须配对写才生效
绝对定位依赖父容器有定位上下文。如果父元素没设 position: relative（或 absolute/fixed），position: absolute 会向上找直到 body，常导致偏移出预期区域。
我要居中
对应 CSS：
.container {
position: relative;
height: 100vh; /* 确保有高度可参照 */
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Flexbox 居中其实更简单，但不是所有场景都适用
如果你只是想让子元素在父容器里居中，且父容器高度可控，display: flex 配合 justify-content 和 align-items 是更轻量的选择。但它不适用于需要脱离文档流的场景（比如浮层遮罩、tooltip）。
立即学习“前端免费学习笔记（深入）”；
- 绝对定位适合「脱离流 + 精确锚定」，比如点击按钮后弹出的菜单
- Flexbox 适合「内部排列 + 保持流式」，比如卡片列表居中对齐
- 别在
body上直接写display: flex居中整个页面——滚动条行为可能异常
移动端要注意 viewport 和缩放导致的偏移
在 iOS Safari 或某些安卓浏览器中，页面缩放或 viewport 设置不当会让 transform 计算出现亚像素偏差，看起来微微偏移。解决方法是加 will-change: transform 或强制启用硬件加速：
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
will-change: transform;
}另外确认 是否包含 user-scalable=no ——如果禁用了缩放，这个偏差通常不会出现；但如果允许缩放，就要接受小概率视觉抖动。
真正麻烦的是嵌套绝对定位：父层用了 transform，子层再用 translate，坐标系会叠加偏移。这种时候得重算逻辑，或者换用 CSS Grid。
