CSS网页布局：div垂直居中的各种方法

CSS 网页布局中，要求 div 元素实现垂直居中是一项非常常见的任务。为了实现这一目标，有多种 CSS 技术可以使用。本文将讲解几种主要的方法，并且提供两个有用的代码示例，以帮助您更好地理解。

1. 使用 display:flex

使用 display:flex 属性可以使一个或多个元素在一个容器中居中。以下是实现垂直居中的 flex 属性的 CSS：

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

在这个例子中，.container 代表包含要垂直居中元素的外部容器。将属性值 align-items 设置为 center 将所有内容垂直居中，包括子元素和文本。

下面是包含 1 个盒子的示范：

<div class="container">
  <div class="box">内容在这里</div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.box {
  background-color: blue;
  color: white;
  padding: 20px;
}

在这个例子中，我们将 justify-content 属性的值设置为 center，将盒子水平居中。然后，为容器设置一个固定的高度（这里设置为 100vh）以使其填充整个屏幕，并将背景颜色设置为蓝色以使其与其他元素区分开来。

2. 使用 position 和 transform 属性

我们还可以使用 position 和 transform 属性实现垂直居中。具体而言，我们可以使用以下 CSS：

.container {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在这个例子中，top 和 left 属性的值均为 50%，这意味着元素相对于其容器水平和垂直居中。然后，我们使用 transform 的 translate() 函数，将元素移回到可见区域内。

下面是包含 1 个盒子的示范：

<div class="container">
  <div class="box">内容在这里</div>
</div>

.container {
  position: relative;
  height: 100vh;
  background-color: yellow;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: blue;
  color: white;
  padding: 20px;
}

在这个例子中，我们设置容器的高度为整个屏幕的高度、背景颜色为黄色，以帮助我们更好地查看布局所占用的区域。然后为盒子添加背景颜色、文字颜色和填充以使其与其他元素区分开来。

上述两种方法是 CSS 实现垂直居中的常用方法，它们都适用于绝大多数布局和场景。希望这篇文章对您有所帮助。