css Grid子元素水平垂直居中方法_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-10-29

浏览次数：次

使用 place-items: center 可简洁实现所有子元素水平垂直居中；2. 分别设置 align-items 和 justify-items 实现相同效果且更明确；3. 对单个子元素使用 justify-self 和 align-self 实现局部居中，适用于特定元素。

css grid子元素水平垂直居中方法

在 CSS Grid 布局中，让子元素在容器内水平垂直居中非常简单。只需要在父容器上设置几行关键的 Grid 属性即可，无需额外处理子元素。

这是最简洁的方法，适用于希望所有直接子元素都居中的场景。

place-items 是 align-items 和 justify-items 的简写，用于控制网格项在单元格内的对齐方式。

示例：

万相营造

阿里妈妈推出的AI电商营销工具

168 查看详情万相营造

.container {
  display: grid;
  place-items: center;
  height: 100vh; /* 示例高度 */
}

这样，所有子元素都会在其网格区域中水平垂直居中。

如果需要更细粒度的控制，可以分开写这两个属性。

示例：

.container {
  display: grid;
  align-items: center;
  justify-items: center;
  height: 100vh;
}

效果与 place-items: center 相同，但更明确。

如果只想让某个特定子元素居中，可以在该子元素上单独设置。

示例：

.item {
  justify-self: center;
  align-self: center;
}

这种方法适合在多个子元素中只居中某一个的情况。

基本上就这些。Grid 的对齐机制比 Flexbox 更直观，尤其在二维居中时代码更清晰。关键是理解 place-items 和自定义对齐属性的使用场景。不复杂但容易忽略细节。

以上就是css Grid子元素水平垂直居中方法的详细内容，更多请关注其它相关文章！