justify-items 和 align-items 仅对 grid 容器生效，控制网格项在各自单元格内的行/列方向对齐；若需整体居中，应在外层用 flex 布局；单个子项居中可用 place-self 或 grid-area + margin: auto。
justify-items: center 和 align-items: center 都不起作用？先确认容器是 grid
这两个属性只对 display: grid 或 display: inline-grid 容器生效。如果父元素只是 div 且没设 display: grid，那写再多 justify-items 也没用。
- 检查开发者工具里该元素的
display计算值是否为grid -
justify-items控制的是**网格项（grid items）在各自单元格内的内联轴（行方向）对齐，不是整个网格内容居中 -
align-items控制的是**网格项在各自单元格内的块轴（列方向）对齐，同样不是让所有项整体居中到容器中心 - 如果你只想让**单个子元素**在网格容器中完全居中，更直接的方式是用
place-items: center（等价于justify-items: center; align-items: center），但依然只影响“每个单元格内部”
想让整个网格内容（所有项）在父容器里水平+垂直居中？用外层 flex
Grid 本身不负责把自己“摆”在父容器中间；那是父容器的布局责任。常见做法是给 grid 容器的父级加 display: flex：
.outer {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 或其他有高度的上下文 */
}
<p>.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 10px;
}- 必须确保外层有明确高度（比如
height: 100vh），否则align-items: center无参考基准 - 不要试图靠
margin: auto给 grid 容器居中——它只对块级元素在行内有效，且需宽度受限 - 如果外层是
body或html，记得移除默认margin，否则会留白
只想让某一个 grid item 居中？用 place-self 或 justify-self + align-self
对特定子元素设置，而不是整个容器：
.grid-item.centered {
place-self: center;
/* 等价于： */
/* justify-self: center; */
/* align-self: center; */
}-
place-self是简写，支持center、start、end、stretch等值 - 这个设置只影响该子项在其所在网格区域（grid area）内的位置，不影响其他项
- 如果该子项跨多行或多列（比如用了
grid-row: 1 / -1），place-self: center就真能把它撑满并居中
用 grid-area + margin: auto 实现单个 item 绝对居中（兼容性好）
这是老方法，但兼容性比 place-self 更广（IE11 都支持）：
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
grid-template-areas: "a";
/* 或更通用：grid-template-areas: ". a ."; 表示左右留空 */
}
<p>.grid-item {
grid-area: a;
margin: auto;
}-
margin: auto在 grid 容器中，对设置了grid-area的子项，会同时触发水平和垂直居中 - 不需要指定
grid-row/grid-column，grid-area已隐式定义了位置 - 注意：该技巧依赖于子项是**唯一一个被分配到该命名区域的元素**，否则多个 item 共享同一
grid-area会导致重叠
实际中最容易忽略的，是混淆「网格容器自身的定位」和「网格项在单元格内的对齐」——前者由外层布局决定，后者才由 justify-items / align-items 控制。
