place-items: center 可在 display: grid 容器中一键实现子元素水平垂直居中，等价于 justify-items: center 和 align-items: center，不依赖轨道数量，且对单个或多个子元素均有效。
用 place-items: center 最快实现居中
只要父容器是 display: grid，一行 place-items: center 就能同时搞定子元素的水平和垂直居中。它等价于同时设置 justify-items: center 和 align-items: center，对单个或多个子元素都生效。
常见错误是写成 place-content: center——这个属性控制的是整个网格轨道（rows/columns）在容器内的位置，不是子元素本身；当只有一行一列时，place-content 完全不触发。
- 必须显式声明
display: grid或display: inline-grid，否则place-items无效 - 子元素若设置了
align-self或justify-self，会覆盖place-items的效果 - 子元素宽高为
auto、100%或固定值，都不影响居中逻辑
justify-content 和 align-content 在 Grid 里为什么不管用
很多人给 Grid 容器加了 justify-content: center 和 align-content: center，发现子元素纹丝不动。这是因为这两个属性只在容器有“多余轨道空间”时才起作用：比如你用 grid-template-rows: repeat(3, 1fr) 创建了三行，但只放了一个子元素，此时剩余两行的空间才能被 align-content 分配。
如果没定义任何 grid-template-*，Grid 默认只生成一个隐式网格单元（1×1），align-content 直接失效。
立即学习“前端免费学习笔记（深入）”；
- 想靠
align-content居中？先确保有多行或多列轨道（如加grid-auto-rows: 100px或grid-template-columns: repeat(2, 1fr)） - 动态生成的隐式轨道（比如靠
grid-auto-flow填充）也可能让align-content表现不稳定 -
place-items不依赖轨道数量，兼容性和语义更可靠
Grid 居中和 Flex 居中的关键区别
两者都能居中，但底层机制不同：Flex 的 justify-content/align-items 是针对弹性项（flex items）在主轴/交叉轴上的对齐；Grid 的 place-items 是针对网格项（grid items）在其网格单元（grid cell）内的对齐盒（alignment box）。
- Flex 容器中，子元素默认“挤在一起”，
align-items控制它们在交叉轴上的位置 - Grid 容器中，每个子元素默认占据一个独立网格单元，
place-items控制它在这个单元里的摆放方式 - 如果子元素是
display: flex容器，它的内部布局不受父 Grid 的place-items影响，但它的整体位置仍会被居中 - Grid 对溢出处理更严格：子元素超出单元格时可能被裁剪，而 Flex 默认允许内容撑开容器
实际项目里容易漏掉的细节
写完 place-items: center 还没居中？大概率是这些地方卡住了：
- 父容器没有设置明确高度（比如
height: 100vh或固定值），导致 Grid 没有可用空间 - 父容器有默认
padding或margin，视觉上偏移了，建议先加box-sizing: border-box和重置内外边距 - 子元素用了
position: absolute，它已脱离网格流，place-items对它完全无效 - 用了 CSS-in-JS 库（如 Emotion、Styled Components）时，样式优先级可能被覆盖，检查 computed styles 确认
place-items是否真实生效
真正麻烦的从来不是怎么写那行代码，而是确认父容器是否真成了 Grid 容器、子元素是否还在网格流里——这两点比语法本身更容易出错。
