能，但仅限于子元素在所属网格单元内居中，非整个容器；需父容器设display: grid、格子有明确尺寸（如grid-template-columns: 1fr）、子元素显式定位（grid-column/grid-row）才可见效果。
justify-self 和 align-self 能不能单独让子元素居中？
能，但仅限于该子元素自身在它所在的网格单元（grid cell）内居中，不是在整个容器中居中。这两个属性作用对象是单个网格项（grid-item），影响的是它在分配给它的那个格子内的对齐方式，和父容器的 justify-items/align-items 行为一致，只是粒度更细。
为什么设置了 justify-self: center; align-self: center; 却没效果？
常见原因有三个：
- 父容器没定义为 grid 布局——必须先设置
display: grid或display: inline-grid - 子元素没被显式放入某个格子——如果没用
grid-column/grid-row，它会默认占满首行首列，此时“居中”看起来没变化，因为格子本身撑满了容器宽度/高度 - 格子本身没有明确尺寸——比如列宽设为
auto、行高没设，浏览器可能把格子压缩到内容大小，导致“居中”无从体现
实际生效需要哪些配套设置？
要让 justify-self 和 align-self 居中可见，得配合控制格子尺寸：
- 列定义推荐用
grid-template-columns: 1fr（或固定值如200px），避免auto - 行定义同理，比如
grid-template-rows: 1fr，或设最小高度min-height: 200px - 子元素可加
grid-column: 1; grid-row: 1;显式定位，确保它落在一个有尺寸的格子里
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
height: 300px;
}
.item {
justify-self: center;
align-self: center;
grid-column: 1;
grid-row: 1;
}
比起 place-self，用 justify-self + align-self 有什么区别？
place-self 是简写，等价于同时设 justify-self 和 align-self，行为完全一致。区别只在写法：
-
place-self: center;→ 同时水平垂直居中 -
justify-self: flex-end; align-self: start;→ 可以错开方向，而place-self不支持混合值（如place-self: center start无效） - 兼容性上，
justify-self/align-self在 Safari 10.1+ 就支持，place-self要 Safari 12.1+，老项目慎用简写
真正容易被忽略的是：即使设置了这些属性，如果网格容器本身没有明确的块级尺寸（比如没设 height 或父容器塌陷），整个布局仍可能“看不见居中”。格子尺寸才是前提，属性只是在格子里做微调。
