justify-self 控制网格项在行内轴（横向）的对齐，常用值有 start、end、center、stretch；2. align-self 控制块轴（纵向）对齐，取值相同；3. 两者结合可实现单元格内完全居中；4. 可覆盖容器的 justify-items 和 align-items 默认设置。
在 CSS Grid 布局中，justify-self 和 align-self 是用来控制单个网格项（grid item）在其网格单元格（grid cell）内如何对齐的属性。它们作用于子元素本身，而不是整个网格容器。
justify-self：控制横向对齐（行内轴）
该属性定义网格项在列方向（即行内轴，inline axis）上的对齐方式。
常用值包括：- start：对齐到单元格的起始边缘（左对齐，LTR 模式下）
- end：对齐到单元格的结束边缘（右对齐）
- center：在单元格内水平居中
- stretch：拉伸以填满整个单元格（默认行为）
.item {
justify-self: center;
}
这个设置会让该网格项在其所在的列单元格中水平居中。
align-self：控制纵向对齐（块轴）
该属性定义网格项在行方向（即块轴，block axis）上的对齐方式。
立即学习“前端免费学习笔记（深入）”；
常用值包括：- start：对齐到单元格顶部
- end：对齐到底部
- center：在单元格内垂直居中
- stretch：拉伸填满整个单元格（默认）
.item {
align-self: center;
}
该元素会在其所在行单元格中垂直居中显示。
两者结合使用
若希望某个网格项在单元格中完全居中，可以同时设置两个属性：
.item {
justify-self: center;
align-self: center;
}
这样，元素将在其网格单元格中水平和垂直都居中。
注意：如果网格容器上设置了 justify-items 或 align-items，它们会为所有子项设置默认对齐方式，而 justify-self 和 align-self 可以覆盖这些默认行为。
基本上就这些。合理使用这两个属性，能让你更精细地控制每个网格项的位置。不复杂但容易忽略细节。
