place-items: center 能实现网格子项在其单元格内水平垂直居中，但仅当父容器设为 display: grid 且作用于直接子元素时生效；若容器非 Grid、子项被嵌套或多层包裹，或子项设置了 align-self/place-self，则该属性无效。

place-items: center 能实现垂直居中，但只在它真正生效的前提下——不是所有写了它的地方都会如你所愿“把元素塞到容器正中间”。

为什么 place-items: center 有时完全没反应

最常见原因是：父容器没设 display: grid。这个属性只对网格容器的**直接子元素**起作用，其他布局（flex、block、绝对定位）完全无视它。

• 检查父元素是否真的有 display: grid 或 display: inline-grid，仅写 place-items 不会自动触发网格模式
• React/Vue 中容易因 Fragment、<div> 套嵌导致目标元素不是直接子代，此时 <code>place-items 对它无效
• 如果子元素设置了 align-self: start 或 place-self: start，会覆盖 place-items 的值
• 父容器高度塌陷（比如没设 height 或 min-height），即使对齐逻辑正确，视觉上也像“没动”

place-items: center 和 align-items: center 的实际差别

align-items: center 在 Grid 中常被误认为“让子元素在容器里垂直居中”，其实它只控制子项在**各自所在行轨道（grid row track）内的块轴对齐**。

• 当 grid-template-rows: 1fr 且容器有明确高度时，align-items: center 看起来像整体居中，本质是子项在那个 1fr 行里居中
• 当有多行（如 grid-template-rows: 100px 1fr 80px），每个子项会在自己被分配到的那行里居中，不是按容器总高算
• place-items: center 是 justify-items: center + align-items: center 的简写，同时管水平和垂直方向，但依然遵循“按单元格对齐”原则

只想居中一个元素？别用 place-items

它天生是批量操作属性。要精准控制单个子项，直接给它加 place-self: center，或拆成 justify-self: center + align-self: center。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• place-self: center 只影响当前元素，其余子项照常按网格流排列
• 比 margin: auto 更可靠——后者在 Grid 中仅当轨道尺寸为 auto 或 fit-content 时才生效
• 若该元素跨多行（如 grid-row: 1 / 3），align-self: center 会让它在这两行合并后的轨道内垂直居中，不是整个容器高度

IE11 及更老浏览器不支持，降级方案怎么选

place-items 在 IE 中完全无效，连带 display: grid 的现代语法也不认。不能靠 @supports 包一层就完事——IE 会直接跳过整条规则。

立即学习“前端免费学习笔记（深入）”；

• 若必须兼容 IE11，优先用 Flexbox 方案：display: flex; justify-content: center; align-items: center;，配合 min-height: 100vh
• 不要混用 place-items 和 -ms-grid-row-align，IE11 会忽略含现代属性的整条 CSS 规则
• @supports (place-items: center) 可用于现代浏览器特性检测，但需确保 fallback 方案已独立声明（比如在另一个 class 里写好 Flex 版本）
真正容易被忽略的点是：居中效果是否“可见”，取决于父容器有没有撑开高度；而“是否生效”，取决于子元素是不是真正的网格直系子项——这两处出问题，place-items: center 再简洁也没用。