justify-content 和 align-items 必须配对使用才能实现弹窗完全居中；仅 justify-content: center 只水平居中，垂直方向仍贴顶，因未启用交叉轴对齐，且父容器需 display: flex + min-height: 100vh。
弹窗居中失效：justify-content 和 align-items 必须配对使用
只写 justify-content: center 会水平居中，但垂直方向仍贴顶——因为没启用交叉轴对齐。必须同时设 align-items: center，且父容器需是 display: flex 的完整上下文。
常见错误是给弹窗自己加 margin: auto：它在 flex 容器里会被 align-items 覆盖，垂直方向完全无效；还可能因内容撑宽导致交叉轴无剩余空间，连水平居中都不可靠。
- 父容器（遮罩层）必须设
min-height: 100vh（不是height: 100vh），避免 iOS 地址栏缩放时视口高度跳变 - 弹窗元素上删掉所有
margin、position、transform相关声明 - 确保父容器没有
overflow: hidden，否则内容更新后重排可能被截断
内容宽度失控：min-width: 0 是关键破局点
width: auto 在 flex 子项里根本不会收缩——这是规范行为：min-width: auto 默认锁定最小宽度，尤其遇到长英文、URL 或内嵌 display: inline-flex 元素时，直接撑满主轴。
不加 min-width: 0，哪怕写了 max-width: 90vw，也拦不住溢出。
- 给弹窗加
min-width: 0解除默认锁定 - 配合
max-width: 90vw防移动端超宽 - 长文本必须加
overflow-wrap: break-word，word-break: break-word不够可靠 - 如需更紧凑适配，可用
width: fit-content，但注意 Safari 需width: -webkit-fit-content，IE 全不支持
内容滚动异常：max-height 别乱套在弹窗根元素上
直接给弹窗设 max-height: 80vh + overflow-y: auto，会导致内容变多时整体上浮——因为 align-items: center 始终以父容器可视高度为基准，而非内容实际高度。
滚动区域必须隔离：让弹窗内部可滚动部分独立承担高度限制，根弹窗只负责居中定位。
- 弹窗根元素（
.modal-content）不要设height、flex: 1或max-height - 在弹窗内部包裹一层滚动容器，例如
.modal-body，设max-height: calc(80vh - 2rem)（预留标题/按钮高度）和overflow-y: auto - 若弹窗含
<details></details>或异步加载内容，DOM 更新后浏览器自动重排，无需 JS 强制触发
横向内容溢出：overflow-x 需显式控制
弹窗里如果有表格、代码块或横向卡片组，overflow-y: auto 对它们无效——横向溢出需要单独处理 overflow-x。
别依赖 white-space: nowrap 硬撑，容易引发不可控换行或截断；Flexbox 是更可控的选择。
- 横向滚动容器设
display: flex+overflow-x: auto+overflow-y: hidden - 子项加
flex-shrink: 0防止被压缩（尤其图片、固定宽卡片） - 避免漏掉
overflow-y: hidden，否则某些安卓设备会出现对角线滚动 - 移动端建议加
-webkit-overflow-scrolling: touch提升滑动惯性
真正难的不是写几行 CSS，而是理解 flex 子项的默认约束（min-width: auto）、居中机制的计算基准（是容器高度，不是内容高度）、以及滚动容器的层级归属（必须是内容区，不能是居中容器本身）。这三处不厘清，调半天 margin 或 transform 都是白费。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
