place-items: center没生效最常见原因是父容器未设display: grid、未撑开高度（如漏min-height: 100vh）或html/body有默认margin；三者缺一不可，否则未进入grid上下文，该声明无效。
place-items: center 为什么没生效？
写了 place-items: center 却发现登录框卡在左上角，大概率是三个基础条件漏了任意一个：父容器没设 display: grid、没给容器撑开高度（比如漏了 min-height: 100vh）、body 或 html 还带着默认 margin: 8px。这三个缺一不可——否则根本没进入 Grid 布局上下文，place-items 就是无效声明。
用开发者工具看 computed 样式，如果 display 不是 grid，或容器 height 是 0px，就直接定位到问题根源。
如何让模态框真正“全屏”且不触发滚动条？
关键不是写 height: 100vh，而是用 min-height: 100vh 配合 html, body { margin: 0; height: 100%; }。否则 iOS Safari 弹出软键盘时，vh 会动态压缩，导致内容被截断；而 100dvh 虽更准确，但兼容性只到 Chrome 105+/Safari 16.4+，生产环境建议先 fallback 到 min-height: 100vh。
-
body上意外加了overflow: hidden会导致模态框下半部分消失，尤其在 Android WebView 或旧版 iOS 中 - 如果模态框外层用了
position: fixed，必须配inset: 0（等价于top: 0; right: 0; bottom: 0; left: 0），不能只靠place-items - 确保模态框 DOM 直接挂载在
下，避免被中间某层overflow: hidden或transform截断渲染边界
登录/注册切换时 Grid 区域怎么不重排？
Grid 区域命名（grid-template-areas）本身不控制显隐，只定义布局槽位。常见错误是给两个模块分别设 grid-area: "login" 和 grid-area: "register"，却没在父容器中用 grid-template-areas 显式声明这些区域——结果就是命名无效，切换只是靠 display: none 硬切，布局毫无响应性。
正确做法是统一占位：.auth-grid { display: grid; grid-template-areas: "main"; }，然后让 .auth-login 和 .auth-register 都设 grid-area: main，再通过类名控制 visibility 或 opacity 实现平滑过渡。
动画入场时为什么点击不到输入框？
用 opacity + visibility 控制显示隐藏时，如果只改 opacity，元素仍占据文档流且可交互；如果只改 visibility: hidden，又会丢失 transition 动画。必须两者配合：
.modal-container { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s step-end; }.modal-container.show { opacity: 1; visibility: visible; }
注意 step-end 是关键：它让 visibility 在动画结束瞬间才切换，避免中间帧出现「半透明但不可点」的体验断层。另外，place-items: center 对内部子元素的 transform 动画无影响，缩放/淡入效果可直接加在 .modal 元素上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
