CSS place-content 属性

place-content 属性是用来设置子元素在其父元素内部的垂直和水平对齐方式的属性。该属性可以同时设置 justify-content 和 align-content，但如果只想设置一个方向的对齐方式，那么应该分别使用 justify-content 和 align-content。

语法

/* Keyword values */
place-content: normal;
place-content: center;
place-content: start;
place-content: end;
place-content: flex-start;
place-content: flex-end;
place-content: self-start;
place-content: self-end;
place-content: baseline;
place-content: first baseline;
place-content: last baseline;
place-content: space-between;
place-content: space-around;
place-content: space-evenly;
place-content: stretch;
place-content: safe center;
place-content: unsafe center;

/* Two-value syntax */
place-content: <align-content> <justify-content>;

/* Global values */
place-content: inherit;
place-content: initial;
place-content: unset;

属性值

• normal：默认值，相当于设置了 stretch start。
• center：将内容垂直和水平居中对齐。
• start：在容器的起始边缘对齐内容。
• end：在容器的结束边缘对齐内容。
• flex-start：在容器的开始位置对齐内容。
• flex-end：在容器的结束位置对齐内容。
• self-start：在它们的容器起点处，对齐它们自己的起始边缘。
• self-end：在它们的容器端点处，对齐它们自己的结束边缘。
• baseline：对齐元素的基线。
• first baseline：对齐第一行的基线。
• last baseline：对齐最后一行的基线。
• space-between：在内容之间平均分配空间，但是第一个和最后一个内容之前不添加空间。
• space-around：在内容之间平均分配空间，并在内容前后添加空间，每个内容周围的空间相等。
• space-evenly：在内容之间平均分配空间，并在内容前后添加空间，每个内容和其前后的空间相等。
• stretch：内容被拉伸以填满容器。
• safe center：将内容垂直和水平居中对齐，但是会遵循容器的填充区域（padding box）。
• unsafe center：将内容垂直和水平居中对齐，忽略容器的填充区域。

示例

以下是对 place-content 属性进行设置的示例代码：

.container {
  display: grid;
  height: 100vh;
  place-content: center;
}

.container {
  display: grid;
  height: 100vh;
  place-content: start space-between;
}

在第一个示例中，我们将容器的内容垂直和水平居中对齐。在第二个示例中，我们垂直对齐容器顶部，并在内容之间分配空间。

更多的示例请参阅 CSS-Tricks 上的文章。

浏览器兼容性

place-content属性在现代浏览器中得到了很好的支持。具体兼容性可参阅 Can I use。