网格项目对齐简写属性
最后更新：2026-09-13
place-items 网格项目对齐简写属性
place-items 是 align-items 和 justify-items 的简写属性，用于在网格容器中统一设置所有网格项在各自单元格内的对齐方式。它同时控制垂直方向（align）和水平方向（justify）的对齐，是让网格内容居中或对齐的便捷工具。
| 分类 | |
|---|---|
| 初始值 | normal |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
place-items: <align-items> <justify-items>?;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<align-items> / <justify-items> | 值 | 对齐简写 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| place-items | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
提示： 只写一个值时，align-items 和 justify-items 都会使用该值，例如 place-items: center 表示两个方向都居中。
提示： place-items 设置在容器上，影响所有网格项；若需单独控制某个网格项，使用 place-self。
❓ 常见问题
Qplace-items 和 place-content 有什么区别？
Aplace-items 控制每个网格项在各自单元格内的对齐方式；place-content 控制整个网格内容区在容器内的对齐（当网格轨道总尺寸小于容器时生效）。前者作用于“项”，后者作用于“整体”，两者可同时设置、互不冲突。
Qplace-items 在 Flexbox 中也能用吗？
A可以。place-items 在 Grid 与 Flexbox 中都有效。flex 中它等价于 align-items 与 justify-items 都居中，但 justify-items 在 flex 中无效果，双向居中建议直接写 align-items + justify-content。
Qplace-items: start end 两个值分别控制哪个方向？
A第一个值对应 align-items（垂直方向），第二个值对应 justify-items（水平方向）。place-items: start end 表示垂直顶部对齐、水平右对齐。只写一个值时两个方向共用该值，place-items: center 即水平垂直都居中，是网格居中内容最常用的写法。
🏷️ 相关属性
💡 相关案例
📚 相关教程
