css grid中的place-items属性是align-items与justify-items的简写，用来控制网格项目在其所在网格单元格内的块轴与行轴对齐方式。通过合理设置该属性，可以用极少量代码实现元素在容器中的各类对齐效果，尤其适合需要快速居中的场景。
place-items基础语法
place-items接收两个值，第一个对应align-items（块轴对齐），第二个对应justify-items（行轴对齐）。如果只写一个值，则两者取相同值。常见取值包括start、end、center、stretch等。
.container {
display: grid;
/* 同时设置块轴和行轴居中 */
place-items: center;
}
实现元素快速居中
传统实现绝对定位居中需要写多条样式，而使用grid place-items只需在容器上声明即可让子项居中：
<div class="box"> <span>居中内容</span> </div>
.box {
display: grid;
place-items: center;
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
不同取值对比
下表列出常用取值在网格单元格内的表现：
| 取值 | 块轴对齐 | 行轴对齐 |
|---|---|---|
| start | 顶部 | 左侧 |
| center | 中间 | 中间 |
| stretch | 拉伸填充 | 拉伸填充 |
综合应用示例
在卡片列表中，我们常需要让图标与文字整体居中排列，可结合place-items: center与网格间距控制：
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
place-items: center;
}
注意事项
- place-items仅对网格项目直接生效，不影响深层嵌套非网格子元素。
- 当项目自身尺寸大于单元格且取值为stretch时，溢出行为由min-width控制。
- 若需单独控制某一轴，可使用align-items或justify-items覆盖。
合理运用place-items能显著减少布局样式量，是css grid实践中高频使用的属性。
css_gridplace-items布局居中修改时间：2026-07-28 22:00:17