CSS Grid中如何通过place-items属性一键美化布局？-css教程-PHP中文网

先查父容器是否设了display: grid、目标元素是否为直接子代、父容器高度是否塌陷；三者缺一place-items: center均无效。

css grid中如何通过place-items属性一键美化布局？

它不是魔法咒语，而是有硬性前提的简写语法。最常卡住人的地方就三个：

父容器没写 display: grid 或 display: inline-grid ——只写 place-items 不会自动开启 Grid 模式
目标元素不是直接子代：React 的 <fragment></fragment>、Vue 的模板根节点、或中间多套了一层 <div>，都会让 <code>place-items 失效
父容器高度塌陷：height: auto 且子内容没撑开时，交叉轴（垂直方向）无参考长度，align-items 部分直接“没得对齐”

临时验证方法：给父容器加 background: #eee 和 min-height: 200px，再看色块是否如预期铺开。

一个管“格子里的内容怎么放”，一个管“所有格子整体怎么摆”。混淆它们是布局错位的头号原因。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

place-items: center → 子元素在各自网格单元内居中（哪怕它只占第一格，也会停在左上角那格正中央）
place-content: center → 整个网格轨道块（比如你定义的 grid-template-rows: 100px 1fr + grid-template-columns: 1fr 1fr）在父容器里居中，子元素相对位置不变
想让单个图标在卡片里居中？用 place-items；想让整张 3×3 卡片网格在视口里居中？得配 place-content

它是容器级批量指令，写上去就影响所有直接子代。多个子项会被挤到同一个中心点，视觉上重叠。

精准控制单个元素：直接在它自己身上写 place-self: center
等价写法：justify-self: center; align-self: center;，调试时更易定位问题来源
注意：若该子项本身是 display: grid 或 display: flex 容器，place-self 只决定它在父网格单元里的位置，不影响其内部子项布局

旧版 Safari 对 place-items 解析不一致（尤其 place-items: center 在某些 writing-mode 下行为异常），IE 则完全无视。

降级方案不是“补 align-items + justify-items”，因为 IE 连这两个都不支持
稳妥做法：用 @supports (display: grid) 包裹 Grid 布局，外层 fallback 用 Flex：display: flex; justify-content: center; align-items: center;
真正在意 Safari 10.0/10.1 用户？建议锁死最低支持版本为 Safari 10.1+，并在构建流程中加入 CSS 验证规则

真正容易被忽略的是：当父容器设置了 grid-template-areas，而子元素用 grid-area 指定了区域时，place-items 居中的仍是该区域内的内容盒——不是整个区域框，这点和多数人直觉相反。