使用 top:50% 和 left:50% 时元素左上角位于中心，导致未居中；应配合 transform: translate(-50%,-50%) 将自身中心对齐视图中心，实现精准居中，并结合 max-width、viewport 设置及 Flexbox 布局优化移动端适配。
在移动端使用 position: fixed 结合百分比设置 top 和 left 实现弹窗居中时，有时会发现弹窗没有真正居中，尤其是在不同尺寸的移动设备上。这个问题通常不是因为 CSS 写错了，而是忽略了元素自身的宽高影响。
问题原因：只用 top/left 百分比但未修正自身偏移
当你设置：position: fixed; top: 50%; left: 50%;此时元素的左上角会定位在页面中心，而不是元素自身中心。这就导致视觉上偏右下方，尤其在竖屏手机上非常明显。
解决方案：配合 transform 修正位置
最简单有效的做法是使用 transform: translate(-50%, -50%) 来将元素向左上方拉回自身宽高的一半：.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这样无论弹窗多大，都能精准居中。
确保移动端适配的其他要点
- 给弹窗外层设置合适的最大宽度（max-width），避免在小屏幕上溢出
- 使用 viewport meta 标签确保视口正确：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 避免使用固定像素宽高，推荐使用 rem、em 或百分比
- 在 iOS 上测试是否受安全区域影响，必要时添加环境变量（env）处理
替代方案：使用 Flexbox 更简洁
如果不需要支持非常老的移动浏览器，推荐使用 Flex 布局：.modal-container {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
这种方式更直观，维护性更强，且天然居中，无需计算偏移。
基本上就这些。用 top:50%; left:50% 搭配 transform: translate(-50%, -50%) 是兼容性好又可靠的方案，能解决绝大多数移动端居中失败的问题。不复杂但容易忽略。
