flex居中模态框需父容器设display: flex并同时用justify-content:center和align-items:center；须配max-width/max-height防溢出、overflow-y:auto实现滚动、min-height:100vh保障高度约束，且遮罩层与模态框须同级并合理设置z-index。
直接用 display: flex + justify-content / align-items 就能居中，但“无缝适配”真正的难点不在居中本身，而在内容溢出、小屏挤压、滚动行为和动画触发时机这四点上。
flex居中为什么在Modal里容易失效
很多人照搬 .modal-overlay { display: flex; justify-content: center; align-items: center; }，结果在手机上弹窗被截断、顶部贴边、或内容撑开遮罩层——根本原因是没约束子元素尺寸和溢出行为。
-
.modal-content必须设max-width（比如90%）+max-height: 90vh，否则在窄屏下宽度超视口，触发横向滚动条 - 不加
overflow: auto的话，长内容会直接撑破弹窗边界，而不是内部滚动 - 如果父容器（
.modal-overlay）用了height: 100%但未设min-height: 100vh，页面内容少时 flex 居中会失效（因为高度不够）
移动端必须处理的三个尺寸断点
响应式不是“写个 @media (max-width: 768px)”就完事。实际要分三层控制：
-
@media (max-width: 480px)：把.modal-content的padding从2rem降到1rem，font-size缩到0.9rem，避免文字顶边 -
@media (max-width: 768px)：把width从80vw改为95%，同时margin设为10% auto（而非auto），防止顶部空白过小导致误触返回 -
@media (prefers-reduced-motion: reduce)：关掉transition和transform动画，只留opacity淡入，否则动画卡顿会让人误以为弹窗没出来
modalDialog 在 R Shiny 中的 CSS 干预要点
R Shiny 的 modalDialog 默认用 Bootstrap 渲染，但它的 .modal-dialog 类不响应 width 百分比，必须用 !important 覆盖或改用 style 参数传内联样式。
- 不要试图用全局 CSS 改
.modal-dialog的width，它会被 Shiny 内部 JS 注入的style属性覆盖 - 正确做法是在
modalDialog(..., style = "width: 90vw !important; max-width: 500px;")中写死，!important是必须的 - 如果用了
size = "l"还错位，大概率是页面有自定义z-index冲突，加一条.modal.fade.in { z-index: 9999 !important; }强制提升层级
真正难的不是让弹窗“看起来居中”，而是让它在 iOS Safari 滑动时背景不滚动、在折叠屏上不被系统手势拦截、在内容动态加载后仍保持比例——这些都得靠 max-height + overflow + viewport-fit=cover 元标签 + touch-action: manipulation 组合压制，单靠 flex 居中远远不够。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
