CSS网格居中技巧：justify-items与align-items详解

golang学习网今天将给大家带来《CSS 中让网格容器内的元素居中，可以使用 justify-items 和 align-items 属性。这两个属性分别控制网格项在主轴（水平方向）和交叉轴（垂直方向）上的对齐方式。1. justify-items用于设置网格项在主轴方向（通常是水平方向）上的对齐方式。start：左对齐end：右对齐center：居中对齐stretch：拉伸填充（默认值）2. align-items用于设置网格项在交叉轴方向（通常是垂直方向）上的对齐方式。start：顶部对齐end：底部对齐center：居中对齐stretch：拉伸填充（默认值）示例代码.container { display: grid; justify-items: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ }说明justify-items: center; 会让所有网格项在水平方向上居中。align-items: center; 会让所有网格项在垂直方向上居中。注意事项如果你希望每个网格项单独居中，而不是整体居中，可以使用 `》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

justify-items 和 align-items 仅使子项在各自网格单元格内居中，不实现容器级绝对居中；单子项绝对居中应使用 margin: auto 或 place-items: center，注意层级覆盖与容器尺寸约束。

用 justify-items 和 align-items 居中网格子项，但要注意适用范围

justify-items: center 和 align-items: center 确实能让所有网格子项在各自单元格内居中（即沿行轴和列轴居中），但它们**不控制子项在整个网格容器内的整体位置**——只影响子项在其分配到的网格区域（grid area）里的对齐方式。

如果你的网格只有单个子项、或子项跨多行/列、或你希望它脱离网格轨道约束居中，这两个属性就不是最佳选择。

• 适用于：每个子项都占据一个标准网格单元格，且你想让它们统一居中显示
• 不适用于：想把一个子项“绝对居中”在整个容器可视区域中心
• 注意：justify-items 对 display: grid 容器生效，对 display: inline-grid 同样有效

真正让单个网格子项在容器正中心，该用 place-items 或 margin: auto

如果目标是让某一个子元素（比如 .card）在网格容器里水平+垂直绝对居中，最直接的方式是：

• 给该子项设置 margin: auto —— 前提是它没被显式指定 grid-row / grid-column，且父容器是 display: grid
• 或者给父容器设 place-items: center（等价于 justify-items: center; align-items: center），效果同上，但更简洁
• 避免混用：不要同时设 place-items: center 和给子项加 justify-self/align-self，后者会覆盖前者

div.grid-container {
  display: grid;
  place-items: center; /* 所有子项在容器中心对齐 */
  height: 300px;
}
<p>.grid-container > div {
width: 100px;
height: 100px;
background: #4a90e2;
}</p>

为什么 justify-items center 看起来没效果？常见原因

经常看到开发者写了 justify-items: center 却发现子项没动，问题往往出在：

• 子项设置了 justify-self: start（或其它值），它会覆盖容器级的 justify-items
• 网格容器没有明确高度（height 或 min-height），导致内容高度由子项撑开，视觉上“居中”不明显
• 子项用了 grid-column: 1 / -1 跨满整行，此时 justify-items 仍会让它在那一整行区域内居中 —— 但因宽度已占满，看不出变化
• 容器用了 grid-template-columns: 1fr 但没设 grid-template-rows，导致行轨道未定义，align-items 失效

替代方案：用 place-self 精确控制单个子项

当你要居中的只是某个特定子项（比如第二个卡片），而不是全部，就别碰容器级属性，直接操作它自己：

• place-self: center 是最简写法（等价于 justify-self: center; align-self: center）
• 确保该子项所在网格区域有足够空间（比如父容器有明确宽高，或它跨了多行/列）
• 如果子项本身有固定尺寸，place-self: center 就能稳稳把它钉在分配到的网格区域中央

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 200px;
  height: 200px;
}
<p>.grid-container > :nth-child(2) {
place-self: center; /<em> 只让第二个子项居中 </em>/
}</p>

网格居中的关键不在“加什么”，而在“加给谁”和“它有没有可居中的空间”。容器没尺寸、子项没轨道、或者对齐属性层级冲突，都会让 center 形同虚设。

好了，本文到此结束，带大家了解了《CSS网格居中技巧：justify-items与align-items详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！