place-items: center 是最简居中方案，但需父容器有高度（如 min-height: 100vh），否则塌陷失效；兼容现代浏览器，ie 不支持；单元素居中用 place-self: center；可拆分为 justify-items 和 align-items 便于调试；grid 与 flex 的 align-items 作用域不同，勿混用 display。
place-items: center 是最简方案，但容器必须有高度
直接写 place-items: center 就能同时搞定水平和垂直居中，前提是父容器得“撑开”——比如设 height: 100vh、min-height: 100vh，或嵌套在 flex 容器里。否则 Grid 容器高度塌陷，子元素看似没动，其实是被挤在顶部了。
- 常见错误：只写
display: grid; place-items: center;，但父容器没设高，结果完全不居中 - 推荐写法：
.container { display: grid; place-items: center; min-height: 100vh; } - 兼容性：Chrome 66+、Firefox 63+、Safari 16.4+ 支持良好；IE 完全不支持（需降级）
只想居中某一个子项？用 place-self 而不是 place-items
place-items 是作用于整个容器的，所有子项都会被居中；而 place-self: center 只影响单个元素，其他子项照常按默认网格流排列——这点在卡片列表、弹窗、通知气泡等场景特别实用。
- 适用场景：网格中只有一个主内容要居中，旁边还有侧边栏、操作按钮等辅助元素
- 注意：父容器仍需
display: grid，但不用设place-items - 示例：
.container { display: grid; } .main-item { place-self: center; }
align-items + justify-items 分开写，更易调试和扩展
place-items: center 是简写，等价于 justify-items: center; align-items: center;。分开写的好处是：可以单独调整某一个方向，比如只水平居中（justify-items: center）、或只垂直居中（align-items: center），也方便后续加响应式断点。
- 调试建议：遇到居中失效时，先检查
justify-items和align-items是否被其他规则覆盖（比如全局重置样式） - 和 Flex 的区别：Grid 的
align-items控制的是“行内所有网格项在其单元格中的垂直对齐”，不是整个容器内容的垂直位置——所以它依赖网格轨道定义（哪怕隐式） - 小陷阱：如果容器只有一行一列，
align-items和justify-items效果和place-items一致；但若有多行多列，它们只影响每个单元格内的对齐，而非整体居中
当 Grid 不适用时，flexbox 是最稳妥的替代方案
虽然 Grid 居中更“二维”，但如果你的布局本质是一维（比如仅需上下左右居中一个模态框），用 Flex 更轻量、语义更清晰，且兼容性略好（Flex 从 Chrome 29 就开始支持）。
立即学习“前端免费学习笔记（深入）”；
- 关键差异：
align-items在 Flex 中控制交叉轴（垂直方向），在 Grid 中控制行内对齐——概念相同，但作用域不同 - 实操建议：优先用 Grid 实现二维布局（如仪表盘、相册网格），用 Flex 处理单行/单列的居中需求（如按钮组、登录框）
- 不要混用：避免给同一个容器同时设
display: grid和display: flex，后者会覆盖前者
