place-items: center没生效，主要是父容器未设display: grid或inline-grid；还需确保子元素为直接子项、父容器有明确高度、未被align-self等覆盖，且区分place-content作用对象。
place-items: center 在 Grid 布局中为什么没生效？
直接写 place-items: center 却发现子元素没居中，大概率是父容器没声明为 Grid 容器。CSS 的 place-items 是 Grid 专属属性，对 Flex 或普通块级元素完全无效。
- 必须先设置
display: grid（或display: inline-grid） -
place-items是align-items和justify-items的简写，只控制**网格项（grid items）** 在单元格内的对齐，不是控制整个网格在页面中的位置 - 如果子元素本身是块级且未设宽高，它会撑满单元格——此时“居中”看起来像没变化，实际已生效
一行代码实现水平+垂直居中：正确写法
真正起作用的最小组合就这三部分：display: grid + place-items: center + 确保子元素是直接 Grid 项。
div.container {
display: grid;
place-items: center;
height: 100vh; /* 需要高度基准，否则 grid 容器可能高度为 0 */
}
注意：height: 100vh 不是可选的——Grid 容器若无明确高度，place-items: center 在垂直方向上找不到参考范围，自然不生效。
和 justify-content / align-content 的区别在哪？
容易混淆的是：place-items 对齐的是**每个网格项在其所在单元格内**的位置；而 justify-content 和 align-content 控制的是**整行/整列网格轨道（tracks）在容器内的分布**。
- 单个子元素时，
place-items: center和justify-content: center; align-content: center效果常一样，但机制完全不同 - 多个子元素时，
place-items: center让每个都居中；justify-content: center可能让它们整体居中排列（比如左对齐但整体居中） - 如果用了
grid-template-rows: 1fr 1fr，align-content: center会让两行轨道在容器内居中分布，而place-items不影响轨道间距
兼容性与降级方案
place-items 在现代浏览器（Chrome 64+、Firefox 67+、Safari 12.1+）中稳定支持，但 IE 完全不支持。若需兼容旧环境，别用 place-items，改用：
- Flex 替代：
display: flex; justify-content: center; align-items: center -
绝对定位 + transform：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - Grid 老写法：
justify-items: center; align-items: center（IE 仍不支持，但语义更清晰）
真正容易被忽略的点：Grid 容器的尺寸必须可计算——没有 height、没有 min-height、父元素又没给高度，那 place-items: center 在纵轴上就是盲操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
