必须设置 html 和 body 高度为 100vh 或 100%，并清除 body 默认 margin；place-items: center 仅适用于单子元素居中，多元素需用 grid-template-columns 配合 justify-content/align-content；移动端需防 100vh 键盘弹出失真。
用 display: grid 实现全屏垂直居中必须设 html 和 body 高度
浏览器默认 body 高度不占满视口，只包裹内容；grid 的 place-items: center 依赖父容器有明确高度才能生效。不设高度，居中会失效，元素实际贴在顶部。
-
html和body都得加height: 100%或100vh - 推荐用
100vh：更直接对应视口，避免嵌套百分比继承问题 - 记得清除
body默认margin，否则可能撑出滚动条
place-items: center 是最简写法，但只适用于单子元素
这个属性等价于 justify-items: center; align-items: center，对网格容器内所有直接子元素生效。它简洁，但有隐含前提：你只想居中一个盒子，且它不需要响应式换行或复杂布局。
- 如果容器里有多个子元素，它们会全部叠在中心——不是“整体居中”，而是“各自居中”
- 需要多列/自适应排列时，得改用
display: grid+grid-template-columns+justify-content/align-content -
place-items在 Firefox 和 Chrome 110+ 稳定支持，Safari 16.4+ 支持，旧版 Safari 需用justify-items+align-items拆开写
不脱标的关键是别用 position: absolute 或 transform
很多人用 top: 50%; left: 50%; transform: translate(-50%, -50%) 居中，但它会让元素脱离文档流（即“脱标”），后续兄弟元素会直接顶上来，布局不可预测。
-
display: grid本身是正常流布局，子元素仍参与文档流，不影响其他元素位置 - 只要父容器是
grid且设了place-items: center，子元素就既居中又保留在流中 - 注意：若子元素本身设了
position: absolute，那它还是会脱标——grid不会覆盖这个行为
移动端键盘弹出时 100vh 可能失真，需兼容处理
iOS Safari 和部分安卓浏览器在软键盘弹出时，100vh 仍按原始视口计算，导致页面被“顶高”，居中元素偏下甚至被遮挡。
- 临时解法：用
min-height: 100vh替代height: 100vh，让容器可随内容撑高 - 更稳方案：监听
resize，用window.innerHeight动态设容器高度（但要注意防抖） - 纯 CSS 方案有限，这个坑目前没有零成本完美解，得根据是否需输入框来权衡
真正卡住人的地方，往往不是 Grid 语法本身，而是忘了 html 和 body 的高度默认是“没高度”的，以及移动端那个藏得深的 100vh 失效问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
