最稳妥且通用的写法是position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%)，父容器必须设position: relative以提供定位上下文，transform百分比基于元素自身宽高，不依赖尺寸且兼容IE9+。
绝对定位实现水平垂直居中，最稳妥且通用的写法是 position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%)。它不依赖子元素宽高是否固定，也不受 margin 折叠干扰，2026 年绝大多数环境都可直接用。
父容器必须设 position: relative
这是最容易漏掉、也最致命的一环。如果父容器没设定位上下文（即 position 值为 static 或未声明），top: 50% 和 left: 50% 就会相对于 viewport（整个视口）计算，而不是你期望的“父盒子中心”。
- 常见错误：只给子元素加
position: absolute，却忘了给包裹它的<div>加position: relative - 滚动时偏移明显——因为 viewport 不随滚动变化，而父容器位置会变
- 不要依赖
body作参考：它可能被重置样式影响（比如缺失margin: 0导致额外偏移） - 只要最近的、
position值为relative/absolute/fixed的祖先存在，就认它
transform: translate(-50%, -50%) 是核心偏移逻辑
它把元素左上角从父容器中心点，向左、向上各挪动“自身宽高的一半”，浏览器实时计算，无需手动填像素值。
- 百分比是相对于元素自身尺寸，不是父容器——所以不管子元素是
width: 200px还是width: 80%，都生效 - 如果同时要用
scale()或rotate()，必须合并写，例如：transform: translate(-50%, -50%) scale(1.2) - 不能写成两行
transform：CSS 只取最后一条声明，前一条会被覆盖，居中失效 - 旧版 iOS Safari（-webkit-transform 前缀；2026 年基本可省略
margin: auto 方案的硬性前提
这种写法看似简洁：position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;，但它有明确限制。
立即学习“前端免费学习笔记（深入）”；
- 子元素必须有明确的
width和height（不能是auto、max-content或纯百分比，除非父容器尺寸也固定） - 适合模态框、加载层等宽高可控的场景；不适合文字卡片或图片等尺寸动态变化的内容
- 优势是不依赖
transform，在极个别老安卓 WebView 中更稳，但兼容性反而不如translate方案广泛 - 注意：若子元素含
display: inline-block或浮动，margin: auto可能失效
真正容易被忽略的是「定位上下文」和「transform 合并书写」这两点。前者导致居中错位且难以排查，后者让动画或缩放后突然偏移——问题不在代码少，而在关键链路断了一环。
