Flex居中失效主因是html/body未设height:100%，需全局重置；推荐用grid place-items:center替代flex，更稳定；模态框须避免absolute/fixed定位及body overflow:hidden陷阱。
flex居中失效，八成是父容器没撑满视口
直接挂载在 body 下的模态框用 display: flex 却偏上、贴顶或不响应，问题不在写法，而在 html 和 body 默认高度不等于视口。Flex 的 align-items: center 和 justify-content: center 要求交叉轴和主轴有明确尺寸，否则计算无依据。
必须加这两行全局重置：
html, body { height: 100%; margin: 0; padding: 0; }
否则 iOS Safari（尤其旧版）下 100vh 会失准，导致外层容器实际高度不足，居中逻辑直接跳过。
- 避免给
body设overflow: hidden，它会截断position: fixed子元素的渲染边界 - 模态框自身不能设
position: absolute或position: fixed，否则脱离 Flex 流，margin: auto或对齐属性全部失效 - 如果模态框嵌套在某个带
padding的容器里，先确认是否真需要那层包裹——多数场景应直接 append 到document.body
absolute + transform 居中在响应式场景下的坑
用 position: absolute 配合 transform: translate(-50%, -50%) 看似简单，但响应式下容易出错：当模态内容高度动态变化（比如加载远程文本、展开折叠区），top: 50% 始终以父容器高度为基准，而内容溢出时不会自动调整，滚动条出现后视觉中心偏移。
更稳妥的做法是只对遮罩层用 position: fixed，内容层交由 Flex 处理：
.modal-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.5);
z-index: 1000;
}
.modal-content {
max-width: 90%;
max-height: 80vh;
overflow: auto;
background: white;
border-radius: 8px;
padding: 24px;
}
-
max-height: 80vh比90vh更安全，留出系统状态栏/浏览器 UI 空间 - 不要给
.modal-content设position，哪怕只是relative，它可能干扰 Flex 的轴向计算 - 移动端键盘弹起时，
vh会缩窄，此时max-height: 80vh可能突然变小，建议搭配 JS 监听resize动态切到min-height回退方案
为什么 place-items: center 比 flex 更省事
Grid 的 place-items: center 是 justify-items: center 和 align-items: center 的简写，语法更短、语义更直，且对单子元素居中行为更稳定——它不依赖父容器是否为 flex 容器，也不受 flex 主轴方向影响。
替换方案只需改一行：
.modal-overlay {
display: grid;
place-items: center;
/* 其余 fixed、size、z-index 不变 */
}
- 兼容性注意：
place-items在 IE 完全不支持，Edge 16+ 才开始支持；如需兼容 IE，必须回退到 flex 方案 - Grid 不会因子元素
margin或padding影响居中位置，flex 则可能被margin: auto冲突覆盖 - 如果未来要扩展为多区域模态（如左操作栏 + 主内容 + 右帮助面板），Grid 的二维能力比 flex 更易维护
滚动穿透与焦点管理不是可选项
模态框打开后，背后页面仍可滚动，这是高频线上 Bug。仅靠 overflow: hidden 加在 body 上不够——iOS Safari 会忽略，Android Chrome 在某些版本下会卡死。
真正有效的组合是：
- 打开模态时，给
body加style="overflow: hidden; position: fixed; width: 100%;"（position: fixed强制重绘布局流） - 关闭时，不仅要恢复
overflow，还要移除position并重置width，否则页面宽度异常 - 用
inert属性标记模态外所有可聚焦元素（document.body.inert = true），或手动遍历tabindex并设为-1，防止键盘 Tab 跳出模态
这些细节不影响居中本身，但一旦漏掉，用户在真实设备上点几下就破功——居中再准也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
