place-items: center 是专用于 grid 容器的居中简写，等价于 justify-items: center 和 align-items: center，仅在 display: grid 下可靠生效；失效主因包括父容器未设 grid、子元素绝对定位或容器高度塌陷。
place-items: center 是最直接的方式，但必须确保父容器是 display: grid（或 display: flex，不过后者支持有限），否则完全无效。
place-items 只在 grid 容器中可靠生效
它不是通用居中魔法，而是专为 Grid（和部分 Flex）设计的对齐简写。常见失效原因：
- 父元素没写
display: grid——place-items对block、flex（旧版）、inline容器无作用 - 子元素用了
position: absolute—— 脱离网格流，place-items不再控制它 - 父容器高度塌陷（比如没设
height或min-height，且子元素无内容撑开）—— 看起来“没居中”，其实是容器本身高度为 0
place-items: center 的实际行为是“单元格内居中”
它等价于同时设置 justify-items: center 和 align-items: center，但关键点在于：
- 每个子元素是在**自己被分配到的网格单元格（grid cell）内**水平+垂直居中，不是相对于整个容器可视区域
- 如果网格有多行多列（如
grid-template-rows: 100px 1fr; grid-template-columns: 1fr 200px），子元素只在各自轨道交叠出的那个格子里居中 - 若想让单个子元素填满整个网格并居中，推荐配合
grid-column: 1 / -1; grid-row: 1 / -1使用，再加place-items: center
兼容性和降级要注意这些细节
现代浏览器（Chrome 57+、Firefox 45+、Safari 10.1+）都支持，但仍有坑：
- Safari 10–11 对
place-items支持不稳定，可改用place-content: center+ 显式单格定义：grid-template: 1fr / 1fr - IE 完全不支持，
@supports (place-items: center)是比 UA 判断更可靠的特性检测方式 - Flexbox 中虽语法合法，但
place-items在 Flex 下仅影响交叉轴对齐，主轴仍需justify-content配合，语义易混淆，不建议在 Flex 中用
真正容易被忽略的是：它不解决“容器自身尺寸不可控”的问题——哪怕写对了 place-items: center，如果父容器高度由内容决定且内容为空，就根本看不到居中效果。先保容器有明确尺寸，再谈对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
