全屏模态窗口用css grid实现不居中的主因是html和body未重置：默认margin导致高度塌陷，必须设body{margin:0;min-height:100vh}、html{margin:0}，且.modal-container需min-height:100vh并配合place-items:center。
全屏模态窗口用 CSS Grid 实现，关键不在 grid-template-rows 写得多漂亮，而在容器有没有真正撑满视口——绝大多数“居中失败”“1fr 不生效”“底部留白”的问题，都卡在 html 和 body 没重置。
为什么 .modal-container { display: grid; place-items: center } 还是不居中？
因为 place-items: center 依赖父容器有明确高度，而浏览器默认 body 高度由内容决定，不是视口。哪怕你给模态容器写了 height: 100vh，只要 body 有默认 margin: 8px，它就会撕开一条白边，且内部可用高度变成 100vh - 16px。
- 必须清空
body { margin: 0; min-height: 100vh; }（min-height比height安全，内容超长时不裁剪） -
html层也要设margin: 0，否则某些浏览器下body的 margin 会外溢 - 模态容器自身（如
.modal-container）必须设min-height: 100vh，不能只靠height: 100% - 验证方式：DevTools 里选中该容器，看 computed
height是否接近屏幕实际像素值（如720px）
如何让模态框本身响应式又不塌陷？
模态框内容区（.modal）适合用 Grid 划分内部结构，但外层浮层容器仍需 position: fixed 或 inset: 0 来脱离文档流、响应视口变化。直接对 .modal 设 display: grid 很容易在 Safari 中塌陷或遮罩失效。
- 外层用
.modal-container { position: fixed; inset: 0; display: grid; place-items: center; } - 内层
.modal设display: grid; grid-template-rows: max-content 1fr max-content; - 中间内容区（如
.modal-body）加overflow-y: auto和min-height: 0，防止 Grid 子项最小尺寸撑爆容器 - 限制宽度：用
width: 90%; max-width: 500px; max-height: 80vh;，比纯1fr更可控
grid-template-areas 在模态层里怎么避免失效？
很多人想用 grid-template-areas 管理模态框内的 header / body / footer，结果区域名没生效——不是语法错，是区域字符串格式或上下文断了。
- 每行引号内单词数必须一致，比如
"header" "body" "footer"可以，"header" "body footer"就会被整个忽略 - 区域名只能含 ASCII 字母、数字、连字符；
modal-header合法，modal_header或modalHeader不合法（大小写敏感） - 对应元素必须显式声明
grid-area: header，漏写就退化为普通流布局，不报错但“消失” - 如果用了
display: contents包裹某一层，它会让子元素直接受上级网格约束，此时在它身上写的grid-area无效
多层弹窗叠加时 z-index 为什么乱了？
用 position: fixed 叠加多个弹窗，z-index 容易被父容器截断；而全屏 Grid 容器（如 body { display: grid }）天然隔离层级上下文，所有弹层作为直系子元素，z-index 只需按插入顺序线性递增即可。
- 前提：Grid 容器自身不能触发新的层叠上下文（禁用
opacity 、<code>transform、will-change） - 推荐结构：
body设grid-template-areas: "main" "overlay" "modal" "toast"，各层通过grid-area归位 - 每个弹层设
z-index: 1000、1001、1002… 不要跳着写，也不要用负值 - 点击穿透问题，大概率是某层
pointer-events: none漏配，或backdrop-filter触发了隐式层叠上下文
真正难的不是写出 grid-template-areas 字符串，而是确保从 html → body → 模态容器这条链上，每一层的高度、margin、display 都没被默认样式或意外声明悄悄覆盖。调试时优先查 computed height 和 margin，而不是反复改 1fr。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
