transform: translate(-50%, -50%) 配合 position: fixed 能居中，是因为 fixed 使元素脱离文档流并相对于视口定位，而 translate 的百分比基于自身宽高，结合 left: 50% 和 top: 50% 将左上角移至视口中心后再反向偏移一半尺寸，实现视觉居中。
为什么 transform: translate(-50%, -50%) 配合 position: fixed 能居中？
因为 fixed 让元素脱离文档流、相对于视口定位，而 transform 的位移是基于自身宽高的百分比计算——translate(-50%, -50%) 恰好把左上角移到中心点，再反向挪回自身一半宽高，视觉上就正中了。
注意：必须同时设置 left: 50% 和 top: 50%，否则 translate 没有基准偏移量，不会生效。
-
left和top是定位起点，transform是在此基础上微调 - 不设
width或max-width时，模态框可能撑满视口，看起来“没居中”其实是内容溢出 - 如果模态框内有
position: absolute子元素，它们的top/left仍以模态框为参考，不受外层transform影响
IE11 下 transform 居中失效怎么办？
IE11 支持 transform，但对 fixed + transform 组合存在渲染 bug：滚动页面后位置偏移，或首次渲染错位。
稳妥解法是退回到「负 margin」方案，前提是模态框宽高固定或可预估：
立即学习“前端免费学习笔记（深入）”；
- 给模态框设明确的
width和height（如400px/300px） - 用
left: 50%; top: 50%; margin-left: -200px; margin-top: -150px; - 若宽高不固定，可用 JS 动态读取
offsetWidth/offsetHeight再设置margin，但需监听resize
移动端 Safari 中模态框被键盘顶起、失去居中怎么办？
iOS Safari 在唤起软键盘时会缩放视口、重算 vh，导致 fixed 元素定位基准偏移，translate 失效。
关键不是禁用缩放，而是避免依赖视口尺寸做定位：
- 不要用
top: 50vh替代top: 50%——vh在键盘弹出时会剧烈变化 - 确保模态框父容器没有
overflow: hidden或transform，否则可能触发 Safari 的怪异层叠行为 - 可在
focus输入框时临时加body { position: fixed; top: 0; width: 100%; }锁定滚动，收起键盘后再恢复
用 position: fixed 居中时，如何防止背景滚动？
模态框显示时，用户仍可滚动背后内容，体验割裂。常见做法是给 body 加 overflow: hidden，但要注意副作用：
- 加
overflow: hidden后，页面会“跳动”——因为滚动条消失，body 宽度变大，可能引起重排 - 更稳的做法是同时加
padding-right: calc(100vw - 100%)补回滚动条宽度 - 若模态框支持 ESC 关闭，记得在关闭时移除
body上的样式，否则滚动永远被锁死
复杂点在于：滚动锁定不是 CSS 单独能搞定的，它牵扯到事件拦截、焦点管理、键盘导航兼容性——尤其当模态框内有表单或可聚焦元素时，容易被忽略。
