css grid布局子元素水平垂直居中方法-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-15 20:10:02

原创

793人浏览过

使用 place-items: center; 可简洁实现所有子元素水平垂直居中；2. 通过 justify-content 和 align-items 分别控制主轴与交叉轴居中；3. 对单个子元素使用 justify-self 和 align-self 实现独立居中，灵活适配不同需求。

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

在 CSS Grid 布局中，让子元素在父容器内水平垂直居中非常简单。只需要在父元素上设置 Grid 相关属性，即可轻松实现居中对齐。

1. 使用 place-items 居中

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

place-items: center; 可以同时设置水平和垂直方向的对齐方式。

示例代码：

    .container {<br>
       display: grid;<br>
       place-items: center;<br>
       height: 100vh; /* 示例高度 */<br>
    }<br>
    .item {<br>
       /* 子元素无需额外样式 */<br>
    }

登录后复制

2. 分别设置 justify-content 和 align-items

如果需要更精细控制，可以分别设置主轴和交叉轴的对齐方式。

justify-content: center; 控制子元素在行上的水平居中
align-items: center; 控制子元素在列上的垂直居中

示例代码：

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

登录后复制

3. 对单个子元素使用 justify-self 和 align-self

当只希望某个特定子元素居中时，可以在该子元素上单独设置。

居然设计家

居然之家和阿里巴巴共同打造的家居家装AI设计平台

查看详情

立即学习“前端免费学习笔记（深入）”；

justify-self: center; 让该元素在网格单元格中水平居中
align-self: center; 垂直居中

示例代码：

    .container {<br>
       display: grid;<br>
       height: 100vh;<br>
    }<br><br>
    .item {<br>
       justify-self: center;<br>
       align-self: center;<br>
    }

登录后复制

基本上就这些方法，根据实际需求选择整体居中还是个别控制，Grid 提供了灵活又直观的对齐能力。

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