CSS Grid布局如何实现项目水平垂直居中_掌握place-items属性的用法

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助手