CSS Flexbox 布局中解决 top、bottom 和 center 的垂直居中-JavaScript中文网-JavaScript教程资源分享门户

在网页设计中，垂直居中是一个常见的挑战。过去，我们可能会使用复杂的 CSS 技巧或 JavaScript 来解决这个问题。但现在，使用 Flexbox 布局，垂直居中变得非常简单。在本文中，我们将讨论使用 Flexbox 布局解决 top、bottom 和 center 的垂直居中问题，并提供实际示例代码。

构建 Flexbox 布局

对于这篇文章，我们假设你已经对 Flexbox 布局有一些基本的了解。如果你对此还不熟悉，可以查阅一些 Flexbox 布局的教程。以下是一个简单的 Flexbox 布局的示例代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

这些代码将创建一个纵向的 Flexbox 布局，其中包含三个项目。

top 和 bottom 的垂直居中

让我们先考虑 top 和 bottom 的垂直居中问题。假设我们想把 .item-1 和 .item-3 垂直居中展示。我们可以使用 Flexbox 的 align-items 属性来解决这个问题。

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item-1, .item-3 {
  margin-top: auto;
  margin-bottom: auto;
}

这段代码中，我们使用了 justify-content 和 align-items 属性来使容器（.container）和其中的项目（.item-1 和 .item-3）都垂直居中展示。然后，我们使用 margin-top 和 margin-bottom 属性将 .item-1 和 .item-3 元素的上下边距设置为 auto，这将使它们自动填充剩余的空间，从而实现垂直居中。

center 的垂直居中

现在，让我们看看如何将项目垂直居中到容器的中心。如果我们只有一个项目，这很容易实现。

// javascriptcn.com 代码示例
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  margin: auto;
}

在这个例子中，我们使用 justify-content 和 align-items 属性将容器和项目都垂直居中。然后，我们使用 margin 属性将 .item 元素的上下和左右边距都设置为 auto，从而实现垂直和水平居中。

但如果我们有多个项目，这个方法就不再适用了。例如，如果我们想要 .item-2 在 .item-1 和 .item-3 之间垂直居中，我们该如何处理呢？

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item {
  margin-left: auto;
  margin-right: auto;
}

在这个例子中，我们仍然使用了 justify-content 属性将项目垂直居中，但是通过使用 flexbox 的默认特性，我们使每个项目都尽可能的填充它们的容器长度，并且没有使用 align-items 属性。然后，我们使用 margin 属性将 .item 元素的左右边距都设置为 auto，从而实现水平居中。这将使 .item-2 元素在 .item-1 和 .item-3 元素之间垂直居中。

总结

使用 Flexbox 布局可以轻松解决 top、bottom 和 center 的垂直居中问题。在本文中，我们讨论了如何使用 align-items 和 margin 属性在 Flexbox 布局中实现垂直居中。此外，我们还讨论了在有多个项目的情况下如何实现垂直居中。希望这篇文章能够给你带来帮助，让你更好地了解 Flexbox 布局的垂直居中特性。

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