使用CSS Grid垂直居中可通过align-items和justify-items实现；推荐用place-items: center简写或对单个子元素设置align-self与justify-self，结合min-height: 100vh避免溢出。
要使用 CSS Grid 实现垂直居中布局，最直接的方法是利用
align-items和
justify-items属性，或者在单个项目的情况下使用
align-self和
justify-self。下面介绍几种常见且实用的方式。
1. 父容器设置 Grid 并居中所有子元素
如果你希望容器内的所有子元素都垂直水平居中，可以这样设置：
.container {
display: grid;
height: 100vh; /* 占满视口高度 */
align-items: center; /* 垂直居中 */
justify-items: center; /* 水平居中 */
}
这个方法适用于只有一个子元素的情况，或你希望所有子项都居中对齐。
2. 使用 grid-template-areas 精确控制位置
当你需要更精确地控制布局时，可以用
grid-template-areas配合
place-items实现居中：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
height: 100vh;
place-items: center; /* 同时设置 align-items 和 justify-items */
}
place-items: center是
align-items和
justify-items的简写，让内容在交叉轴和主轴都居中。
3. 单个子元素居中（推荐灵活方式）
如果容器中有多个元素，但只想让其中一个垂直水平居中，可以针对该子元素单独设置：
.container {
display: grid;
height: 100vh;
}
.centered {
justify-self: center; / 水平居中 /
align-self: center; / 垂直居中 /
}
这种方法不会影响其他子元素的布局，灵活性更高。
4. 使用 min-content 高度避免溢出
有时内容较少，但仍需在视口中居中，可结合
min-height或
height: 100vh来确保容器有足够的空间：
.container {
display: grid;
min-height: 100vh;
align-items: center;
justify-items: center;
}
使用
min-height而不是
height可以防止内容过多时被截断。
基本上就这些。CSS Grid 提供了非常简洁的方式来实现垂直居中，关键是理解
align-items控制垂直对齐，
justify-items控制水平对齐。实际开发中根据结构选择合适的方法即可，不复杂但容易忽略细节。
