教你如何优雅的实现垂直居中（推荐）

教你如何优雅的实现垂直居中（推荐）攻略

当我们想让一个元素在其父元素中垂直居中时，有多种方式可以实现。本文将介绍一些简单而优雅的方法来实现这一目的。

方法一：使用 Flexbox

Flexbox 是 CSS 中实现布局的一种强大工具。可以使用 Flexbox 来实现垂直居中。以下是实现此目的的 HTML 和 CSS 代码示例：

<div class="parent">
  <div class="child">我垂直居中了</div>
</div>

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.child {
  /* 垂直和水平都居中 */
  text-align: center;
}

分析

上述代码实现了两个步骤：

1. 将父元素 .parent 转换为 Flex 容器，使其子元素 .child 成为 Flex 项。
2. 利用 align-items 和 justify-content 属性来垂直和水平居中 .child.

值得注意的是，本方法只适用于现代浏览器。

方法二：使用 Grid

Grid 也是 CSS 中实现布局的一种工具。类似于 Flexbox，Grid 也可以使用来实现垂直居中。以下是实现此目的的 HTML 和 CSS 代码示例：

<div class="parent">
  <div class="child">我也垂直居中了</div>
</div>

.parent {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 100vh;
}

.child {
  /* 垂直和水平都居中 */
  text-align: center;
}

分析

上述代码实现了两个步骤：

1. 将父元素 .parent 转化为 Grid 容器，这样可以让子元素 .child 成为 Grid 项。
2. 利用 justify-content 和 align-content 属性来水平居中和垂直居中 .child.

和 Flexbox 一样，Grid 也只适合于现代浏览器。

总结

通过本文，我们了解了两种有效且优雅的方法来实现垂直居中，这两种方式分别是 Flexbox 和 Grid。

虽然这两种方法都只适用于现代浏览器，但它们是实现垂直居中的最佳方法之一。

通过使用这些技术，我们可以轻松地让元素垂直居中，使网站的布局更加美观和专业。