子元素在CSS Grid中居中需确保容器设place-items: center且子元素占据全网格区域，或用place-self: center；常见问题包括容器无宽高、子元素被嵌套、误用justify-content等。
子元素在 CSS Grid 中无法居中，通常不是 justify-items: center 和 align-items: center 组合本身有问题，而是它们作用的对象和前提条件被忽略了。
明确这两个属性的作用对象
justify-items 和 align-items 是设置网格容器（grid container）上所有直接子项（grid items）在单元格内的对齐方式，不是让整个 item 在整个网格区域里居中——它只控制 item 在它所占据的那个 grid cell 里的对齐。
也就是说，如果某个子元素跨了多行或多列（比如用了 grid-column: 1 / -1），它依然只会在自己占据的那些单元格组成的矩形区域内对齐，而不是在整个容器中居中。
真正让单个子元素在网格容器中整体居中
要让一个子元素（比如一个卡片、一个按钮）在整行整列的网格容器中水平垂直居中，推荐用以下方式：
立即学习“前端免费学习笔记（深入）”；
- 给容器设
display: grid，并添加place-items: center（等价于justify-items: center; align-items: center） - 但更关键的是：确保该子元素是唯一子元素，或显式让它占据整个网格区域：
grid-column: 1 / -1;grid-row: 1 / -1; - 或者更简洁——不用定义网格线，直接用
place-self: center在子元素自身上设置（覆盖容器的默认对齐）
常见错误场景与修复
以下情况会导致看似“设置了却没居中”：
- 容器没有明确的宽高（如内容撑开），导致居中效果不明显 → 给容器设
min-height: 100vh或固定尺寸 - 子元素有 margin/padding/border 影响计算 → 检查是否触发了最小尺寸限制（
min-width/min-height默认为 auto） - 父容器是 grid，但子元素又被包了一层（比如 div 套 div），而对齐写在了外层 → 确保
justify-items/align-items写在真正的 grid 容器上 - 用了
justify-content: center却误以为能垂直居中 → 它只控制网格轨道整体在容器主轴上的位置，和 item 内部对齐无关
快速验证的最小可运行示例
复制这段代码到 HTML 文件中即可看到居中效果：
<div style="display: grid; place-items: center; width: 300px; height: 200px; border: 1px solid #ccc;"> <div style="background: #4a90e2; color: white; padding: 20px;">居中内容</div> </div>
