单网格项目对齐属性

最后更新：2026-09-13

place-self 单网格项目对齐属性

place-self 是 align-self 和 justify-self 的简写属性，用于单独控制某个网格项在其单元格内的对齐方式。与 place-items 不同，place-self 设置在具体的网格项上，可以覆盖容器级别的 place-items 设置，实现个别项目的特殊对齐需求。

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

📝 语法

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

⚙️ 取值

值	类型	描述
`<align-self> / <justify-self>`	值	单个项目对齐简写

▶ 示例

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

▶ 试一试

🌐 浏览器支持

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

提示： place-self: center 可以让单个网格项在单元格内居中，不受容器 place-items 设置的影响。

提示： auto 值表示继承容器的 place-items 设置，是默认行为。

❓ 常见问题

Qplace-self 和 place-items 的优先级哪个高？

Aplace-self 优先级更高。place-items 在容器上设置所有网格项的默认对齐，place-self 设置在单个网格项上覆盖该默认值，只影响它所在的项目。这与 align-self/justify-self 覆盖 align-items/justify-items 的规则一致。

Qplace-self 可以只覆盖一个方向吗？

A可以。只写一个值时该值同时应用于两个方向，如 place-self: center 表示水平垂直都居中；写两个值时第一个值控制垂直方向（align-self），第二个值控制水平方向（justify-self），如 place-self: start end 为顶部 + 右对齐。省略第二个值时它自动使用第一个值。

Qplace-self: auto 是什么意思？

Aauto 表示使用容器的默认设置，即继承容器的 align-items 和 justify-items（也就是 place-items）。place-self 默认值就是 auto，所以不写时子项跟随容器对齐；显式写 place-self: auto 等价于不设置，常用于覆盖更上层的统一样式。