单个子元素在父容器中完全居中时，grid更简洁：place-items: center一行搞定，不依赖子元素高度或行内特性，语义清晰且天然隔离布局干扰。
Grid居中比Flex更简洁的适用场景
单个子元素需要在父容器里完全居中（比如登录框、弹窗、图标卡片），place-items: center 一行就搞定，不需要额外设置 justify-content 和 align-items 两个属性。Flex 虽然也能做到，但必须显式写全，而且语义上它本意是“对齐多个子项”，用在单个元素上略显绕弯。
Grid垂直居中不依赖子元素高度或行内特性
Flex 的 align-items: center 在父容器高度未明确时容易失效；而 Grid 只要父容器有可分配空间（比如设置了 min-height: 100vh 和 grid-template-rows: 1fr），就能稳稳撑开并居中——哪怕子元素是空的、高度为 0，或内部是纯文本没设 line-height。
- 常见错误：只写
height: 100%，但父级没继承高度，导致 Grid 容器实际高度为 0 - 必须加
min-height: 100vh，不是height - 显式声明
grid-template-rows: 1fr，避免旧版 Firefox 或嵌套 Grid 下轨道未生成
Grid居中天然隔离布局逻辑，不怕 margin 或 float 干扰
Flex 容器里混用 margin: auto 会导致 Safari 下垂直偏移；Grid 容器里子元素用 margin: auto 会被忽略，反而更“干净”。它也不吃 float 或 position: absolute 的影响——只要子元素没脱离文档流，place-items 就管用；一旦用了 position: absolute，那就得自己算坐标，place-items 自动失效，这点必须留意。
Grid二维语义让意图更清晰
Flex 是一维模型，align-items 描述的是“所有子项在交叉轴上的对齐方式”；Grid 的 place-items: center 表达的是“每个直接子元素，在它所处的网格单元里居中”，逻辑更聚焦、更符合单元素居中的直觉。尤其当后续可能扩展为多区域（比如加 footer、sidebar），Grid 的 grid-template-areas 天然可演进，Flex 得重构成嵌套结构。
真正容易被忽略的是：Grid 居中效果是否生效，取决于容器有没有“生成轨道”。没有 grid-template-rows 或内容撑开高度时，它看起来就像没反应——这不是 bug，是规范行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
