如何用css grid实现垂直居中布局-css教程-PHP中文网

如何用css grid实现垂直居中布局

P粉602998670

发布： 2025-09-19 15:22:01

原创

876人浏览过

使用CSS Grid垂直居中可通过align-items和justify-items实现；推荐用place-items: center简写或对单个子元素设置align-self与justify-self，结合min-height: 100vh避免溢出。

如何用css grid实现垂直居中布局

要使用 CSS Grid 实现垂直居中布局，最直接的方法是利用

align-items

登录后复制

和

justify-items

登录后复制

属性，或者在单个项目的情况下使用

align-self

登录后复制

和

justify-self

登录后复制

。下面介绍几种常见且实用的方式。

1. 父容器设置 Grid 并居中所有子元素

如果你希望容器内的所有子元素都垂直水平居中，可以这样设置：

.container {
  display: grid;
  height: 100vh; /* 占满视口高度 */
  align-items: center;    /* 垂直居中 */
  justify-items: center;  /* 水平居中 */
}

登录后复制

这个方法适用于只有一个子元素的情况，或你希望所有子项都居中对齐。

2. 使用 grid-template-areas 精确控制位置

当你需要更精确地控制布局时，可以用

grid-template-areas

登录后复制

配合

place-items

登录后复制

实现居中：

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

.container {
  display: grid;
  height: 100vh;
  place-items: center; /* 同时设置 align-items 和 justify-items */
}

登录后复制

place-items: center

登录后复制

是

align-items

登录后复制

和

justify-items

登录后复制

的简写，让内容在交叉轴和主轴都居中。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

3. 单个子元素居中（推荐灵活方式）

如果容器中有多个元素，但只想让其中一个垂直水平居中，可以针对该子元素单独设置：

.container {
  display: grid;
  height: 100vh;
}
<p>.centered {
justify-self: center; /<em> 水平居中 </em>/
align-self: center;   /<em> 垂直居中 </em>/
}</p>

登录后复制

这种方法不会影响其他子元素的布局，灵活性更高。

4. 使用 min-content 高度避免溢出

有时内容较少，但仍需在视口中居中，可结合

min-height

登录后复制

或

height: 100vh

登录后复制

来确保容器有足够的空间：

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

登录后复制

使用

min-height

登录后复制

而不是

height

登录后复制

可以防止内容过多时被截断。

基本上就这些。CSS Grid 提供了非常简洁的方式来实现垂直居中，关键是理解

align-items

登录后复制

控制垂直对齐，

justify-items

登录后复制

控制水平对齐。实际开发中根据结构选择合适的方法即可，不复杂但容易忽略细节。

以上就是如何用css grid实现垂直居中布局的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

CSS布局中float与position结合使用技巧_经典布局实践在html中使用style标签定义样式_css内嵌方式实例 Grid布局中行和列的间距如何设置_grid-gap与gap属性详解 CSS中的hsl和hsla颜色表示法怎么用_色相饱和度亮度详解 CSS过渡在响应式布局中如何处理不同屏幕_transition自适应