如何使用 CSS Grid 在网格中垂直居中内容-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 是一个强大的布局工具，它可以让我们更轻松地创建复杂的布局。在使用 CSS Grid 布局时，我们经常需要将内容垂直居中。本文将介绍如何使用 CSS Grid 在网格中垂直居中内容。

理解 CSS Grid

在学习如何使用 CSS Grid 垂直居中内容之前，我们需要先了解一些 CSS Grid 的基础知识。

CSS Grid 是一个二维布局系统，它将一个网页划分为行和列的网格，并可以将内容放置在这些网格中。我们可以通过定义网格行和列的数量和大小来创建一个网格。

使用 align-items 属性

CSS Grid 提供了一个名为 align-items 的属性，可以用来控制网格中内容的垂直对齐方式。该属性可以取以下值：

start：内容与网格容器的顶部对齐。
end：内容与网格容器的底部对齐。
center：内容在网格容器中垂直居中。
stretch：内容被拉伸以填充整个网格容器的高度。
baseline：内容与网格容器的基线对齐。

以下是一个使用 align-items 属性将内容垂直居中的示例：

// javascriptcn.com 代码示例
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  height: 200px;
  align-items: center;
}

.grid-item {
  background-color: #ccc;
  text-align: center;
  font-size: 30px;
}
</style>

在上面的示例中，我们创建了一个包含四个网格项的网格容器。我们使用了 align-items 属性将内容垂直居中，并通过设置高度来限制了网格容器的高度。

使用 grid-template-rows 属性

另一种将内容垂直居中的方法是使用 grid-template-rows 属性。该属性可以用来定义网格的行高，我们可以使用它来将每个网格项的高度设置为相同的值。

以下是一个使用 grid-template-rows 属性将内容垂直居中的示例：

// javascriptcn.com 代码示例
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
  height: 200px;
}

.grid-item {
  background-color: #ccc;
  text-align: center;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

在上面的示例中，我们使用了 grid-template-rows 属性将网格的行高设置为相同的值。我们还将每个网格项的 display 属性设置为 flex，并使用 align-items 和 justify-content 属性将内容垂直居中。

使用 auto 和 grid-auto-rows 属性

另一种将内容垂直居中的方法是使用 auto 和 grid-auto-rows 属性。该属性可以用来定义网格行的大小，我们可以使用它来让网格项自动填充网格行的高度。

以下是一个使用 auto 和 grid-auto-rows 属性将内容垂直居中的示例：

// javascriptcn.com 代码示例
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <<div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.grid-item {
  background-color: #ccc;
  text-align: center;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-item:nth-child(2) {
  grid-row: span 2;
}
</style>

在上面的示例中，我们使用了 auto 和 grid-auto-rows 属性来让网格项自动填充网格行的高度。我们还使用了 grid-row 属性将第二个网格项跨越两行，并将其垂直居中。

总结

本文介绍了如何使用 CSS Grid 在网格中垂直居中内容。我们学习了使用 align-items、grid-template-rows、auto 和 grid-auto-rows 属性来实现这个目标，并提供了相应的示例代码。使用 CSS Grid 布局可以让我们更轻松地创建复杂的布局，这对于前端开发来说是非常重要的技能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657825a4d2f5e1655d20769f