使用 place-items: center 可简洁实现所有子元素水平垂直居中；2. 分别设置 align-items 和 justify-items 实现相同效果且更明确；3. 对单个子元素使用 justify-self 和 align-self 实现局部居中，适用于特定元素。
在 css Grid 布局中，让子元素在容器内水平垂直居中非常简单。只需要在父容器上设置几行关键的 Grid 属性即可，无需额外处理子元素。
1. 使用 place-items: center
这是最简洁的方法，适用于希望所有直接子元素都居中的场景。
place-items 是 align-items 和 justify-items 的简写，用于控制网格项在单元格内的对齐方式。
示例：
.container { display: grid; place-items: center; height: 100vh; /* 示例高度 */ }
这样，所有子元素都会在其网格区域中水平垂直居中。
立即学习“前端免费学习笔记（深入）”；
2. 分别设置 align-items 和 justify-items
如果需要更细粒度的控制，可以分开写这两个属性。
- align-items：控制垂直方向（交叉轴）对齐
- justify-items：控制水平方向（主轴）对齐
示例：
.container { display: grid; align-items: center; justify-items: center; height: 100vh; }
效果与 place-items: center 相同，但更明确。
3. 对单个子元素使用 justify-self 和 align-self
如果只想让某个特定子元素居中，可以在该子元素上单独设置。
示例：
.item { justify-self: center; align-self: center; }
这种方法适合在多个子元素中只居中某一个的情况。
基本上就这些。Grid 的对齐机制比 Flexbox 更直观，尤其在二维居中时代码更清晰。关键是理解 place-items 和自定义对齐属性的使用场景。不复杂但容易忽略细节。