place-items 能一键居中是因为它是 justify-items 和 align-items 的简写使网格子项在其网格单元内水平垂直居中但仅对 display: grid 容器的直接子项生效且不改变子项自身尺寸。place-items 为什么能一键居中place-items 是 CSS Grid 的简写属性等价于同时设置 justify-items 和 align-items。它只作用于**网格容器的子项grid items在网格区域内的对齐方式**前提是这些子项是直接子元素、且容器已声明 display: grid 或 display: inline-grid。常见错误现象place-items: center 写了但没效果——大概率是因为容器不是 Grid 容器或子元素被包裹了多层比如套了个 div导致实际居中的不是你预期的那个元素。必须确保父容器有 display: grid哪怕没定义 grid-template-rows 或 grid-template-columns如果只希望某个项目居中而其他项目不参与place-items 不适用——它是个容器级批量控制属性此时该用 justify-self align-self注意兼容性place-items 在 Safari 10.1、Chrome 57、Firefox 45 支持IE 完全不支持Edge 16 开始支持place-items: center 和 place-items: stretch 的区别默认值是 place-items: stretch也就是子项会拉满所在网格单元的宽高而 place-items: center 让所有子项在其网格单元内水平垂直居中且**不改变子项自身尺寸**。使用场景模态框、登录卡片、图标按钮组这类需要“内容块居中显示”的布局。但要注意如果子项本身没有设定宽高又没内容撑开它可能缩成一个点——这不是 place-items 的问题而是子项“不可见”了。立即学习“前端免费学习笔记深入” RedClaw 百度推出的手机端万能AI Agent助手