用fixed+inset-0+flex居中需锚定高度：min-h-100vh保底、h-full兜底防iOS视口突变；弹窗设w-full max-w-md适配多端；遮罩关闭须e.target===e.currentTarget拦截冒泡；关闭按钮用absolute top-4 right-4+z-10定位。
直接用 fixed + inset-0 + flex 就能居中，但“优雅”不在于写几行类名，而在于内容不溢出、滚动可控、iOS 不偏移、点击区域不误触——这些才是真实项目里卡住人的点。
为什么 justify-center + align-items-center 居中后内容一多就滚不动？
根本不是 Flex 写错了，而是外层没锚定可用高度空间：
-
height: 100vh在 iOS Safari 中会随地址栏/软键盘收放突变（比如从 812px 跳到 600px），导致max-height失效 -
align-items: center只管对齐，不管尺寸上限；内容高过交叉轴可用空间时，Flex 默认溢出，不自动截断 - 给弹窗本体加
h-full或flex-1，它就脱离居中流，滚动和居中同时崩坏
必须让遮罩层（.modal-overlay）承担锚点职责：position: fixed + inset-0 + min-h-100vh + h-full + flex。其中 min-h-100vh 是保底，h-full 是兜底——当视口缩小时（如键盘弹出），它能跟随 html 实际高度回退。
弹窗本体该设多宽？max-w-md 还是 w-full？
两者都要，且顺序不能错：w-full max-w-md。
立即学习“前端免费学习笔记（深入）”；
-
w-full让小屏下宽度自适应（避免固定宽度如w-96溢出） -
max-w-md（≈456px）限制大屏上限，防止内容过宽失焦 - 别用
sm:max-w-lg这类响应式断点——max-w-md全尺寸生效更轻量，无需额外判断
如果弹窗内含长文本、表格或代码块，务必加 overflow-y-auto max-h-[80vh]，再补一句 min-h-0（Safari 中防止 flex 子项拒绝收缩）。
点击遮罩层关闭弹窗，为什么点到按钮也关了？
因为事件冒泡没拦住。纯 HTML/CSS 场景下，JS 绑定最稳：
document.querySelector('.modal-overlay').addEventListener('click', (e) => {
if (e.target === e.currentTarget) {
e.currentTarget.remove();
}
});
关键在 e.target === e.currentTarget —— 只有点击真正落在遮罩层本身（而非内部按钮、输入框）才触发关闭。React/Vue 用户可用 @click.stop，但原生 JS 别偷懒写成 onclick="this.remove()"，那会误删所有子节点。
关闭按钮定位为什么不用 float-right？
因为弹窗根元素是 flex 容器，float 在 flex 布局里完全失效。
- 正确姿势：
absolute top-4 right-4，配合text-gray-500 hover:text-gray-700 - 别漏掉
z-10（确保按钮压在弹窗内容上，否则可能被遮挡） - 若弹窗含表单，焦点陷阱（focus trap）得手动处理——Tailwind 不管这个，得自己用
focusable元素 +tabindex控制
最易被忽略的细节：iOS 上没有 min-h-0 的 flex 子项，在 Safari 中可能不收缩；animate-fadeIn 类依赖 visibility，而 fixed 元素默认 visibility: visible，动画大概率白写。
