place-items: center 能替代 absolute + transform 居中，但需父容器 display: grid、有可计算高度（如 min-height: 100vh）、html/body 清除默认 margin；否则失效。
place-items: center 能直接替代 position: absolute + top: 50% + transform: translate(-50%, -50%)，但前提是父容器已进入 Grid 上下文且高度可控——漏掉任一条件，它就和没写一样。
为什么 place-items: center 没生效？
不是语法错，是三个基础条件缺一不可：
- 父容器必须显式设
display: grid（inline-grid也行，但grid-cols-1这类 Tailwind 类必须确保插件已启用） - 父容器要有可计算的高度，比如
min-height: 100vh；仅靠内容撑开的height: auto会让垂直居中“居中到看不见的地方” -
html和body必须清掉默认margin: 8px，否则容器实际高度被压缩，100vh失效
用开发者工具看 computed 样式：如果 display 不是 grid，或容器 height 是 0px，问题就在这儿。
grid-template-rows: 1fr auto 1fr 和 place-items: center 有什么区别？
两者都能实现垂直居中，但机制不同、适用场景也不同：
立即学习“前端免费学习笔记（深入）”；
-
place-items: center是“强硬塞进第一个格子中心”，只要格子有空间，子元素就一定在正中；适合单个模态框、加载动画等简单结构 -
grid-template-rows: 1fr auto 1fr是靠三行分配空间来推挤出居中效果，更可控——比如你想让模态框离顶部留点呼吸感，可以把第一行设成minmax(2rem, 1fr) - 如果模态框要支持键盘弹出（如 iOS Safari），
100vh会被压缩，此时grid-template-rows方案比单纯依赖place-items更稳，因为你可以用min-height: 100dvhfallback，而place-items本身不解决 viewport 高度抖动问题
多个重叠模态层怎么同时居中？
Flexbox 在这种场景会失效——它按顺序分配空间，只有第一个子元素真居中；Grid 则天然支持所有子项共享同一锚点：
- 给每个模态层加
grid-area: 1 / 1，强制它们都落在第 1 行第 1 列的同一个网格单元里 - 父容器设
display: grid; place-items: center; min-height: 100vh - 用
z-index控制层级，不需要position: absolute—— Grid 项默认堆叠上下文独立，不会被中间某层overflow: hidden或transform截断 - 特别注意：DOM 结构上，这些模态层必须直接挂载在同一个 Grid 容器下，不能嵌套在
div或section中间，否则会脱离网格项身份
动画入场时输入框点不到？
常见于用 opacity 或 visibility 控制显隐的模态框：
- 只改
opacity: 0→ 元素仍占据流、可交互、能获得焦点 - 只改
visibility: hidden→ 动画会丢失，因为visibility不支持 transition - 正确写法是两者配合：
opacity: 0; visibility: hidden;+transition: opacity 0.25s ease, visibility 0.25s step-end; -
step-end很关键：它让visibility在动画结束瞬间才切换，避免中间状态出现“半透明但不可点”的尴尬
真正容易被忽略的是：如果模态框外层用了 position: fixed，哪怕你用了 Grid，也得配 inset: 0（等价于 top: 0; right: 0; bottom: 0; left: 0），否则 Grid 的 min-height: 100vh 就没意义——fixed 元素高度默认由内容决定，不继承 viewport 尺寸。
