absolute + transform 方案最常用且兼容性好，通过先锚定左上角再自身回退实现居中，需父容器有定位上下文；仅用 top/left 50% 会偏移因移动的是左上角；transform 百分比基于自身宽高，IE8 不支持需降级。
position: absolute + transform: translate(-50%, -50%) 是最常用且兼容性好的方案
这个组合能绕过元素宽高未知的限制，不需要提前知道 width 或 height，适合动态内容或响应式场景。核心逻辑是：先用 position: absolute 把元素左上角锚定到父容器中心，再用 transform: translate(-50%, -50%) 自身回退一半宽高。
关键前提是父容器必须有定位上下文（即 position 值为 relative、absolute、fixed 或 sticky）：
.parent {
position: relative;
height: 300px; /* 需有高度，否则子元素无法居中 */
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}为什么不能只用 top: 50%; left: 50%
因为 top: 50% 和 left: 50% 移动的是元素的**左上角**，不是中心点。如果元素宽高不为 0，它会偏右下——看起来像“过了头”。transform: translate(-50%, -50%) 是对元素自身做位移，-50% 指的是该元素自身的宽高比例，和父容器无关。
- 错误表现：
top: 50%; left: 50%后，元素右下角大概在容器中心 - 加了
transform才真正让元素中心对齐容器中心 - 注意：
transform的百分比基准是元素自身，不是父容器
IE8 及更老浏览器不支持 transform，需降级处理
如果项目还需兼容 IE8，这个方案不可用。此时得改用已知宽高的传统方式（margin: -half-height auto auto -half-width），或借助 display: table-cell + vertical-align: middle，但后者对父容器结构约束强。
立即学习“前端免费学习笔记（深入）”；
现代项目中，只要目标浏览器支持 CSS3（IE9+、Chrome 4+、Firefox 3.6+），transform 方案就稳妥。不过要注意：
- 某些移动端 WebView（如旧版 UC）可能对
transform解析异常，建议加-webkit-transform前缀 - 若元素有
transition动画，transform居中可能引发重排/重绘性能问题，但通常影响极小 - 避免在
transform中混用px和%（如translate(-50%, -20px)），语义易混淆且难维护
flex 替代方案更简洁，但兼容性略不同
虽然你问的是 transform + position，但顺带提一句：如果父容器能接受 display: flex，一行代码就能解决：justify-content: center; align-items: center。它不要求子元素定位，也不依赖 transform，语义更清晰。
但它对 IE10+ 才完全可靠（IE10 需要 -ms- 前缀），而 transform 方案在 IE9 就可用。所以选哪个，取决于你的兼容性底线和布局上下文是否允许改父容器样式。
复杂点往往不在写法本身，而在判断「该不该用」——比如嵌套在 position: fixed 弹窗里的按钮，用 flex 可能受外层干扰，这时 absolute + transform 反而更可控。
