应使用 place-self: center 居中单个子元素，而非 align-items/justify-items；后者作用于所有直接子元素，会导致多元素重叠，而 place-self 精准控制单个元素在其隐式网格单元内的水平垂直居中。
用 align-items 和 justify-items 居中单个子元素？别这么干
这两个属性作用对象是**所有直接子元素**，不是某个特定项。想靠它们把某一个 div 水平+垂直居中，结果会是：所有子元素一起被拉到容器中心——除非你只放一个子元素，否则极易失控。
常见错误现象：justify-items: center 后文字缩成一团、图标错位、响应式时布局塌陷。根本原因是误把它们当成了“单元素居中工具”。
-
align-items控制的是**行内交叉轴对齐**（比如 flex-direction: row 时控制垂直方向） -
justify-items控制的是**网格单元格内容的对齐**，不是网格项本身的位置 - 真正影响子元素在网格轨道中位置的是
justify-self和align-self
正确做法：用 justify-self + align-self 居中单个元素
给需要居中的子元素单独设置这两个属性，它就会无视其他子项，乖乖待在自己所在网格单元的正中心。
.container {
display: grid;
height: 300px;
}
.item {
justify-self: center; /* 水平居中 */
align-self: center; /* 垂直居中 */
}这个组合不依赖父容器是否只有一行一列，也不要求设置 grid-template-rows/columns ——浏览器会自动为该元素生成隐式网格单元，并居中其内容。
立即学习“前端免费学习笔记（深入）”；
- 适用于按钮、弹窗、加载指示器等需要精确居中的独立组件
- 比写
grid-column: 1 / -1; grid-row: 1 / -1更轻量，无需计算行列跨度 - 注意：如果父容器没设高度（比如
height: auto），垂直居中可能无效——因为没有可参考的交叉轴尺寸
更稳妥的方案：用 place-self 一行搞定
place-self 是 align-self 和 justify-self 的简写，语义清晰且不易漏写：
.item {
place-self: center; /* 等价于 align-self: center; justify-self: center; */
}它支持两个值：place-self: <align-self><justify-self></justify-self></align-self>，比如 place-self: end start。但绝大多数居中场景，一个 center 就够了。
- 兼容性：Chrome 68+、Firefox 61+、Safari 12.1+，现代项目基本无压力
- 和
margin: auto在 Grid 中的行为一致，但更明确——这是“我就是要在这个单元里居中”，而不是“碰巧被 margin 推过去” - 如果子元素本身有固定宽高，
place-self: center会严格按单元格中心点定位；如果是文本或弹性内容，会以内容盒为中心
为什么不用 align-items + justify-items？看实际效果差异
假设容器有 3 个子元素：
.container { display: grid; align-items: center; justify-items: center; }
.item-a { background: red; }
.item-b { background: blue; }
.item-c { background: green; }结果是三个元素全部挤在容器正中央，互相重叠——因为每个单元格都把自己的内容居中了，而默认每个元素占一个单元格，这些单元格又默认铺满整行整列，最终视觉上全叠在一起。
- 这种写法适合“卡片网格”场景：每张卡片内部图文居中，但卡片本身仍按网格排列
- 想让整个网格内容区居中？那得用
margin: auto或place-content: center（作用于网格线之间的空隙） - 最容易被忽略的一点：Grid 的居中逻辑是“单元格内居中”或“项自身居中”，不是“容器内居中”——思维惯性常让人跳过这层抽象
