justify-items 和 align-items 控制网格项在其所属单元格内的对齐，非容器整体居中；place-items: center 是其简写；单个元素居中应使用 place-self: center。
justify-items 和 align-items 是作用于网格单元格内部的对齐控制
这两个属性不决定网格项在整页或容器中的位置，而是决定每个网格项**在其所属的网格单元格内**如何摆放。常见误解是拿它们当“整个 Grid 容器居中”的工具——那其实是父元素的事，和 justify-items 无关。
它们生效的前提很实在：display: grid 必须已声明，且网格项得落在有明确尺寸的单元格里（比如设置了 grid-template-rows 或依赖内容撑开高度）。否则 align-items: center 可能没效果——因为没有可参考的交叉轴长度。
-
justify-items控制水平方向（行轴），值为center时让内容在单元格内左右居中 -
align-items控制垂直方向（列轴），值为center时让内容在单元格内上下居中 - 两者同时设为
center，就是最常见的“单元格内完全居中”组合
place-items: center 是更简洁的等效写法
place-items: center 就是 align-items: center 和 justify-items: center 的简写，语义更直白，也不容易漏写其中一个。它只影响直接子元素，行为完全一致。
但注意：这个简写在 Safari 12.1+、Chrome 68+、Firefox 61+ 才稳定支持。如果项目要兼容旧版 Safari（比如 iOS 12），还是分开写更稳妥。
- 现代项目推荐用
place-items: center，少两行代码，逻辑更紧凑 - 若需兼容老浏览器，就老老实实写全
align-items和justify-items - 别混着用——比如容器设了
place-items: center，又单独加align-items: start，后者会覆盖前者
单个元素居中别乱用 justify-items/align-items
如果 Grid 容器里有多个子元素，又只希望其中某一个居中，绝不能只靠 justify-items 和 align-items。它们作用于所有直接子项，结果是全部被拉到各自单元格中心——可能重叠、错位、响应式下崩塌。
真正该用的是 justify-self 和 align-self，或者更清爽的 place-self: center：
.container {
display: grid;
height: 300px;
}
.item-to-center {
place-self: center;
}
这个方案不依赖显式行列定义，浏览器会自动为该元素生成隐式网格区域并居中；也比手动写 grid-column: 1 / -1; grid-row: 1 / -1 更轻量、意图更明确。
容易被忽略的容器高度问题
很多情况下 align-items: center 看似无效，根源常是容器高度为 auto。Grid 的交叉轴（垂直方向）需要一个可计算的高度才能“居中”，否则它不知道中点在哪。
- 常见修复：给容器加
min-height: 100vh或明确的height - 如果容器高度由内容撑开，而内容又很短，
align-items: center仍可能不生效——此时考虑用align-content: center（针对多行网格轨道）或换 Flexbox 方案 - 图片等替换元素有时会因
vertical-align或默认stretch行为干扰对齐，可加align-self: center强制覆盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
