网格内容对齐简写属性

最后更新：2026-09-13

place-content 网格内容对齐简写属性

place-content 是 align-content 和 justify-content 的简写属性，用于在网格容器中控制整个网格内容区相对于容器的对齐方式。当网格轨道的总尺寸小于容器尺寸时，该属性决定了多余空间的分配方式，是实现网格整体居中和分布的关键。

分类
初始值	normal
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

place-content: <align-content> <justify-content>?;

⚙️ 取值

值	类型	描述
`<align-content> / <justify-content>`	值	内容对齐简写

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
place-content	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： place-content: center 可以让整个网格在容器中水平和垂直都居中。

提示： space-between、space-around、space-evenly 等值可以控制网格轨道之间的间距分配。

❓ 常见问题

Qplace-content 什么时候才会生效？

A只有当网格轨道的总尺寸（含 gap）小于容器尺寸时才会生效，此时浏览器把剩余空间按 place-content 的值进行对齐与分布；若轨道用 fr 单位自适应填满容器，或容器尺寸由内容撑开没有富余空间，该属性看不到任何效果。想要生效，轨道用固定或 minmax 尺寸、容器给明确宽高。

Qplace-content 和 place-items 该用哪个？

A两者作用层面不同、常配合使用。place-content 控制整个网格内容区在容器中的位置，解决“网格比容器小、如何摆放”的问题；place-items 控制每个网格项在各自单元格内的对齐，解决“单元格内如何摆项目”的问题。需要整体居中用 place-content，需要项目居中用 place-items。

Q为什么 grid 里 place-content: center 有时候没效果？

A最常见原因是网格填满了容器：轨道用了 fr 单位会自动吸收所有剩余空间，容器没有富余区域，place-content 无处生效。另一个原因是容器高度由内容撑开，不存在剩余空间。想用 place-content: center 让整个网格居中，轨道应使用固定值或 minmax，并给容器明确的宽高。