CSS 如何在绝对定位的父级 div 中垂直居中一个 div

在本文中，我们将介绍如何使用 CSS 将一个 div 垂直居中于绝对定位的父级 div。这在网页设计中非常常见，特别是当我们想要在一个具有特定高度的容器中居中放置内容时。

阅读更多：CSS 教程

为什么需要垂直居中

垂直居中是一种常见的网页设计技巧，它可以确保内容在页面上以更独特的方式呈现。当我们想要在一个绝对定位的父级容器中居中放置一个 div 时，我们可以使用 CSS 实现这一目标。

使用 flexbox 垂直居中

Flexbox 是一种强大的 CSS 布局模型，它可以轻松地实现垂直居中效果。对于这个问题，我们可以通过以下步骤使用 flexbox 来垂直居中一个 div：

首先，我们需要将父级 div 的 display 属性设置为 flex，这样它就成为一个 flex 容器。
接下来，我们将 flex 容器的 justify-content 属性设置为 center，这样它的子项就会在水平方向上居中。
最后，我们将 flex 容器的 align-items 属性设置为 center，这样它的子项就会在垂直方向上居中。

下面是示例代码：

.parent {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background-color: #f1f1f1;
  padding: 20px;
}

在上面的示例中，.parent 是一个具有绝对定位的父级 div，它的高度和宽度都为 200 像素。.child 是要在父级 div 中进行垂直居中的子 div，它具有一些填充和背景颜色以示区分。

使用定位和 transform 垂直居中

除了使用 flexbox，我们还可以使用定位和 transform 属性来实现垂直居中效果。下面是使用这种方法的示例代码：

.parent {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  padding: 20px;
}

在上面的示例中，.parent 是一个具有绝对定位的父级 div，它的高度和宽度都为 200 像素。.child 是要在父级 div 中进行垂直居中的子 div，它使用了定位和 transform 属性来实现居中效果。通过将子 div 的 top 和 left 属性设置为 50%，以及使用 translate(-50%, -50%) 偏移属性，我们可以将它在父级 div 中垂直和水平居中。

这两种方法都可以很好地在绝对定位的父级 div 中垂直居中一个 div。选择使用哪种方法取决于你的个人喜好和项目需求。