place-items: center 必须配合 display: grid 或 inline-grid 才生效，仅设置该属性无效；它作用于 grid 直接子元素，在可用空间内居中所有子项；若需单个元素居中，应改用 place-self: center。
place-items: center 必须搭配 display: grid
只写 place-items: center 不生效，是新手最常踩的坑。这个属性本身不定义布局类型，它只是对已存在的 Grid 容器起作用。浏览器看到没设 display: grid 或 display: inline-grid，就直接忽略该声明。
正确写法必须包含两部分：display: grid + place-items: center。缺一不可。
- 父容器必须显式声明
display: grid（不能靠继承或间接设置） - 如果用
inline-grid，也要确保父级有足够宽度容纳内容，否则可能被压缩 - 某些框架（如 Vue 的
<template></template>或 React 的 Fragment）会悄悄插入匿名 wrapper，导致目标元素不再是 Grid 的直接子元素——这时place-items就完全失效
父容器高度塌陷时 place-items 什么都不会做
place-items: center 是在“可用空间”内居中，不是在“视觉区域”里硬拉。如果父容器没有明确高度，比如只写了 height: auto 又没内容撑开它，computed height 就是 0px，那子元素自然无处可居中。
常见表现：页面看起来空一片，开发者工具里 place-items 显示为已设置，但子元素贴在左上角不动。
- 加
min-height: 100vh是最快验证方式 - 更稳健的做法是配合
grid-template-rows: 1fr，强制分配可用高度 - 避免依赖
height: 100%，它需要所有祖先都设高度，链路一断就归零
place-items 会影响所有直接子元素，不是只针对某一个
如果你只想让一个图标居中，其余文字保持左对齐，place-items: center 会把所有子项全挤到中心重叠——这不是 bug，是设计如此。
这时候应该换用 place-self: center，它只作用于当前元素，且无需改动父容器其他样式。
-
place-self: center等价于同时设justify-self: center和align-self: center - 目标元素仍需是 Grid 容器的**直接子元素**，中间不能嵌套 wrapper
- 若该元素跨行（如
grid-row: span 2），align-self: center是在它所占的那几行合并后的轨道内居中，不是整个容器高度
place-content: center 和 place-items 混用容易出问题
当你要居中的是一整块网格轨道（比如 grid-template-columns: repeat(3, 100px) 定义的 3×3 区域），而不是单个子元素，就得用 place-content: center。
它控制的是“网格轨道整体”在容器内的位置，和 place-items 的作用对象完全不同。两者混用，尤其是同时设了 place-items: center 和 place-content: center，会导致对齐基准混乱，结果不可预测。
-
place-content生效的前提是：容器尺寸 > 网格轨道总尺寸（比如容器宽 500px，列总宽才 300px） - 如果网格轨道刚好填满容器，
place-content就没空间可居中，表现和没写一样 - 真正容易被忽略的是：Grid 居中依赖轨道尺寸。没定义
grid-template-rows、又没内容撑高时，align-self找不到对齐基准，加min-height: 100vh或grid-template-rows: 1fr比反复调justify-content有用得多
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
