使用 place-items 和 align-self 可灵活实现CSS Grid布局中的垂直居中：place-items 用于容器内所有子元素的整体居中，align-self 用于单独调整特定子元素的对齐方式，二者结合可高效控制布局对齐。
在CSS Grid布局中，让Grid元素垂直居中可以通过 place-items、align-self 等属性灵活实现。这些方法适用于不同粒度的控制——整体容器统一设置或单个子元素单独调整。
使用 place-items 实现整体居中
如果希望Grid容器内的所有项目都垂直且水平居中，最简洁的方式是使用 place-items 属性。
该属性是 align-items 和 justify-items 的简写，可同时控制交叉轴和主轴对齐方式。示例：
.container {
display: grid;
place-items: center; /* 垂直和水平居中 */
}
等价于：
.container {
align-items: center;
justify-items: center;
}
这样容器内所有子元素都会在各自网格区域内居中显示。
使用 align-self 单独控制某个元素
当只需要让某一个Grid子元素垂直居中时，可以使用 align-self 单独设置其在交叉轴上的对齐方式。
align-self 控制单个项目在交叉轴（通常是垂直方向）的对齐，类似 align-items 但作用于个体。示例：
.item {
align-self: center; /* 垂直居中 */
justify-self: center; /* 水平居中（可选） */
}
这在多项目布局中非常实用，比如只让标题居中而其他内容保持默认对齐。
结合使用场景示例
实际开发中，常将 place-items 用于统一布局基调，再用 align-self 微调特定元素。
例如：
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
place-items: start; /* 默认左上对齐 */
}
.center-item {
grid-column: span 2;
align-self: center; / 单独居中这个跨列元素 /
}
这里大部分元素靠上对齐，但类名为 center-item 的元素在垂直方向居中。
基本上就这些。掌握 place-items 和 align-self 的配合使用，能高效实现Grid布局中的垂直居中需求，既简洁又灵活。不复杂但容易忽略细节。
