用 position: fixed + transform 居中是最稳妥的方案，需同时设置 left: 50%、top: 50% 和 transform: translate(-50%, -50%)，因 transform 的 50% 基于自身宽高，不受视口尺寸影响，兼容 IE9+，且响应式宽度下仍精准居中。
用 position: fixed + transform 居中是最稳妥的方案
移动端和桌面端屏幕宽高差异大，靠 margin: auto 或百分比 top/left 都容易偏移。固定定位配合 transform: translate(-50%, -50%) 能绕过设备尺寸依赖，直接基于自身宽高做偏移，浏览器兼容性也够用（IE9+）。
关键点在于：必须同时设置 left: 50% 和 top: 50%，再用 transform 反向拉回一半自身尺寸。
- 不设
left/top，transform没有参考原点，会无效 - 只设
left: 50%但没top: 50%，垂直方向就不动 - 弹窗本身不能有
display: inline类行为，否则transform偏移可能不准
.modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 480px;
padding: 20px;
}
为什么不用 margin: auto 配合 position: fixed
margin: auto 在 position: fixed 下仅对 left/right 有效（当 width 固定且 left/right 均为 auto），但垂直方向完全失效——top/bottom 设为 auto 不会居中，而是按文档流默认位置渲染，实际等于 top: 0。
- 想靠
margin: auto实现全向居中，得把元素放进display: flex的容器里，但fixed容器通常没有父级上下文可依赖 - 某些旧版 Safari 对
margin: auto在 fixed 元素上的支持不稳定 - 一旦加了
max-width或响应式width，margin计算就更难预测
响应式弹窗宽度变化时，transform 还准不准
准确。因为 translate(-50%, -50%) 中的 50% 是相对于元素自身的宽高，不是视口，所以不管 width 是 90%、300px 还是 max-width: 480px，偏移始终是自身尺寸的一半。
立即学习“前端免费学习笔记（深入）”；
- 如果弹窗内容高度动态变化（比如异步加载文本），需确保
height: auto，避免固定height导致底部被截断 - 在 iOS Safari 中，若弹窗含
input且唤起软键盘，视口高度变化可能导致top: 50%基准偏移；此时建议监听resize事件重置或改用 JS 动态计算 - 不要给弹窗加
transform: scale()等叠加变换，会干扰translate的计算顺序
遇到 transform 失效或抖动的常见原因
多数不是居中逻辑问题，而是层叠或渲染上下文干扰：
-
overflow: hidden父容器裁剪了 fixed 元素——fixed 元素本该脱离文档流，但某些安卓 WebView 会错误继承父容器的裁剪边界 - 弹窗内部用了
position: absolute子元素，且其top/left值过大，导致整个弹窗视觉上“偏了”，其实居中本身是对的 - CSS 动画或 transition 同时作用于
transform，造成帧率不稳或初始状态未生效；建议只对opacity和transform做动画，且用will-change: transform提前提示 - 部分低版本 UC 浏览器不支持
transform百分比值，需补-webkit-transform，但现代项目基本可忽略
