Grid布局中子元素居中应在父容器用place-items: center（等价于justify-items和align-items设center），或对单个子项用justify-self/align-self: center；切勿在子元素设margin: auto或混用Flex逻辑。
Grid 布局中让子元素水平垂直居中其实很直接，关键在于理解容器和项目的控制关系——不是在子元素上设居中，而是在父容器（grid container）上用 place-items 或组合使用 justify-items 与 align-items。
用 place-items: center 一步到位
这是最简洁的方式，适用于所有直接子项都需居中的情况。它等价于同时设置 justify-items: center（主轴居中）和 align-items: center（交叉轴居中）。
- 只对 grid 容器生效，子元素无需额外样式
- 适用于单个或多个子项，每个子项都会在其网格区域中居中（注意：不是整个容器中心）
- 若子项跨越多行或多列（如用了
grid-column/grid-row），它仍按自身所占网格区域居中
当需要单独控制某一个子项时，用 justify-self 和 align-self
如果只有某个特定子元素要居中，其他保持默认位置，就在该子元素上设置：
-
justify-self: center—— 控制其在所在网格区域内的左右位置（主轴） -
align-self: center—— 控制其在所在网格区域内的上下位置（交叉轴） - 这两个属性会覆盖容器级的
justify-items和align-items
注意：别和 flex 的居中逻辑混淆
Grid 的 justify-items/align-items 是作用于“每个网格区域内部”的对齐，不是让子项整体在容器里居中。如果想让一个子项真正居于整个 grid 容器正中心（无视网格线），更稳妥的做法是：
- 给容器设
display: grid并定义单个 1×1 网格区域：grid-template: 1fr / 1fr - 再给子项设
justify-self: center; align-self: center - 或者直接用
place-items: center，效果一致
常见误区提醒
以下操作通常无效或不必要：
- 在子元素上写
margin: auto—— Grid 中只有当子项是“可伸缩轨道”中的块级元素时才可能生效，不可靠 - 对容器设
text-align: center—— 对非内联元素无用 - 混用 Flex 和 Grid 居中逻辑试图“叠加效果”——容易互相干扰，选一种布局模式专注处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
