根本原因是flex子项默认min-width:auto强制撑满主轴；需设min-width:0解除限制，并配合max-width:90vw、overflow-wrap:break-word防溢出，且父容器必须min-height:100vh确保居中空间。
Flex 实现自适应居中弹窗，width: auto 失效、内容溢出、垂直偏移——根本原因不是写法错，而是没破除 flex 子项的默认最小宽度限制。
为什么 margin: auto 在 flex 里不居中弹窗
常见现象：父容器设了 display: flex; justify-content: center; align-items: center;，弹窗元素写了 margin: auto，但水平居中了，垂直却贴顶或偏移。
-
margin: auto在 flex 容器中只对「单个弹性子项」生效，且仅在主轴/交叉轴有剩余空间时才起作用；若弹窗本身是block元素且未显式约束尺寸，它会按内容撑宽，导致交叉轴无“可分配空间” - 更关键的是：
align-items: center作用于所有子项，而margin: auto会与之冲突——后者在 flex 上下文中优先级低于align-items，实际被忽略 - 正确做法：去掉弹窗上的
margin: auto，完全依赖容器的justify-content和align-items
弹窗 width: auto 不收缩？必须设 min-width: 0
Flex 子项默认 min-width: auto（规范行为），导致即使你写了 width: auto，它也会强行撑满主轴可用宽度，尤其当内部有长文本、图片或 inline-flex 子容器时。
- 解决方案：给弹窗加
min-width: 0，解除默认最小宽度锁定 - 配合
max-width: 90vw防止超宽（尤其移动端） - 若需更精细控制宽度，可用
width: fit-content，但注意 Safari 需-webkit-fit-content，IE 全不支持 - 别漏掉
overflow-wrap: break-word，否则长英文/URL 仍会撑破容器
内容高度动态变化时，max-height 怎么不截断又保持居中
设了 max-height: 80vh 后，弹窗内容变多时被截断、滚动条出现但整体位置上浮——这是因为 align-items: center 仍以“容器可视高度”为基准，而非内容实际高度。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器用
min-height: 100vh（不是height: 100vh），避免 iOS 地址栏缩放或下拉刷新导致视口高度抖动 - 弹窗内滚动区域应单独设
max-height: calc(80vh - 2rem)（预留标题/按钮高度），并加overflow-y: auto - 不要给弹窗设
height: 100%或flex: 1，这会让它试图占满父容器高度，破坏居中逻辑 - 若弹窗含可展开的
<details>或异步加载内容，DOM 更新后浏览器会自动重排，无需 JS 强制触发，但要确保父 flex 容器没有overflow: hidden
完整可复用结构的关键点
真正稳定居中的组合不是靠技巧堆砌，而是每个环节都堵住常见泄漏点：
- 外层遮罩（overlay）：用
position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; min-height: 100vh; - 弹窗本身：去掉所有
position、transform、margin: auto，只保留min-width: 0; max-width: 90vw; overflow-wrap: break-word; - 内部滚动区：用独立
<div class="modal-body">包裹内容，设max-height: 60vh; overflow-y: auto; - 兼容性兜底：IE11 支持
min-width: 0，但不支持inset，固定定位遮罩需写top: 0; right: 0; bottom: 0; left: 0;
最易被忽略的是：父容器是否真有“可居中的空间”。哪怕只漏掉一行 min-height: 100vh，整个 flex 居中就失效——它不报错，只是安静地不工作。
