使用align-items和justify-items可实现Grid子元素在网格单元格内垂直水平居中，前者控制Y轴对齐，后者控制X轴对齐，适用于多个子项统一居中；若需单独控制，则使用place-items或align-self与justify-self。
在CSS Grid布局中，让子元素在网格容器内垂直水平居中，可以通过 align-items 和 justify-items 属性结合使用来实现。这两个属性分别控制网格项在交叉轴和主轴上的对齐方式。
align-items 与 justify-items 的作用
align-items：定义网格项在行内（列方向，即Y轴）的对齐方式，也就是垂直方向的对齐。
justify-items：定义网格项在行方向（X轴）的对齐方式，即水平方向的对齐。
若希望所有子元素在其网格区域中统一居中，可在父容器上设置这两个属性：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
align-items: center; /* 垂直居中 */
justify-items: center; /* 水平居中 */
}
这样，每个网格子元素都会在其对应的网格单元格中实现水平和垂直居中。
适用于多个子项的统一居中
这种方法适合当你有多个子元素，并且希望它们全部在各自的网格区域内居中显示。例如，一个3×2的卡片布局，每张卡片内容自动居中。
- align-items: center — 所有子项在列方向居中
- justify-items: center — 所有子项在行方向居中
注意：这不会使整个内容相对于整个容器居中，而是每个子项在其所属的网格格子内居中。
单个子项居中或更灵活控制
如果你只想让某个特定子项居中，或者想在整个网格容器的中央区域显示一个元素，可以改用 place-items 或者通过 margin、place-self 控制单个项目。
例如，使用简写属性：
.container {
display: grid;
place-items: center; /* 等价于 align-items + justify-items 都设为 center */
}
对单独子元素：
.item {
align-self: center;
justify-self: center;
}
这样可以让该子项在网格中独立居中，而不影响其他项目。
基本上就这些。使用 align-items 和 justify-items 结合，是实现Grid子元素批量居中的简洁有效方式。根据实际需求选择全局设置还是个体控制即可。
