place-items: center 仅在父容器为 display: grid 且目标元素为其直接子元素时生效；常见失效原因包括父容器非 grid、子元素非直系、高度塌陷、place-self 覆盖或子元素为 absolute 定位。
place-items: center 能实现盒子内容的垂直（及水平）居中，但**只在父容器是 display: grid 且目标元素是其直接子元素时才真正生效**。写上它不等于“自动居中”，很多情况下它根本没反应——问题几乎都出在这三个沉默的前提上。
为什么 place-items: center 经常没反应
这不是属性坏了，而是它被“忽略”了。最常见原因如下：
- 父容器没设
display: grid或display: inline-grid——place-items对flex、block、甚至没写display的元素完全无效 - 目标元素被多套了一层（比如 React 的
<Fragment>、Vue 的<template>、或随手加的<div>），导致它成了“孙子”，而place-items只管“儿子” - 父容器高度塌陷：没设
height、min-height，或被上级overflow: hidden/flex: 0 0 auto截断，导致对齐有基准但“看不见” - 子元素自己写了
align-self: start或place-self: start，直接覆盖了父级的place-items - 子元素是
position: absolute—— 它已脱离网格流，place-items失去控制权
place-items 和 place-content 到底该用谁
这两个名字像，作用却完全不同，混用就白写：
-
place-items: center管的是“每个子项在自己格子里怎么放”——比如一个图标在卡片里居中、多个按钮各自在格子里居中 -
place-content: center管的是“所有格子组成的整块区域在父容器里怎么摆”——比如一个 3×3 网格只填了左上角一个子项，place-content: center会让这整个 3×3 的“空架子”在父容器里居中，子项相对位置不变 - 单个主内容居中（如登录框、全屏提示），优先用
place-items: center；若网格轨道明显没铺满容器（比如只定义了grid-template-rows: 100px），又想让“格子群”整体居中，才加place-content: center
只想居中某一个子元素，别碰 place-items
place-items 是容器级批量操作，一设就是全体生效。要精准控制单个，必须绕过它：
- 给目标子元素加
place-self: center（推荐，语义清晰、一行搞定） - 或拆成
justify-self: center+align-self: center，方便单独调试水平/垂直行为 - 确保父容器仍是
display: grid，但不要设place-items，避免被覆盖 - 注意：
place-self会覆盖place-items的继承值，所以即使父级写了place-items: start，你也能靠place-self: center单独拉回一个元素
兼容性和降级必须动手写，不能只靠 @supports
IE 完全不支持 place-items（连带 justify-items/align-items 都不认），Safari 10.0–10.1 行为也不稳定。仅靠 @supports (place-items: center) 做包裹，旧浏览器会彻底丢失居中逻辑。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法：先写老式可靠方案，再叠加现代语法。例如父容器同时写：
display: flex; justify-content: center; align-items: center;
再用@supports (display: grid)覆盖为display: grid; place-items: center; - 如果已用
display: grid作为主布局，至少补上align-items: center; justify-items: center;—— 这些属性在 IE 中会被忽略，不影响现有逻辑，现代浏览器则会按预期覆盖 - 真正卡住人的，从来不是
place-items: center写错，而是忘了它背后那两个沉默的前提：容器得有宽，也得有高。
