CSS 如何垂直居中一个div

在本文中，我们将介绍如何使用CSS将一个div垂直居中。垂直居中元素是前端开发中常见的需求之一，特别是在响应式设计中。有很多方法可用来实现垂直居中，我们将介绍其中几种常用的方法。

阅读更多：CSS 教程

方法一：使用flexbox布局

flexbox布局是一种强大而灵活的CSS布局模型，可以轻松实现垂直居中。以下是一种基本的flexbox布局方法：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

首先，我们需要创建一个包含需要垂直居中的div的容器。将容器的display属性设置为flex，这将使容器成为一个flex容器。接下来，使用justify-content属性将div水平居中，使用align-items属性将div垂直居中。

以下是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  border: 1px solid black;
}

.centered {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<div class="container">
  <div class="centered">垂直居中的div</div>
</div>

</body>
</html>

在上面的示例中，我们创建了一个高度为300px的容器，并将内部div垂直居中显示。

方法二：使用position属性和transform属性

另一种实现垂直居中的方法是使用position属性和transform属性。以下是一种常用的方法：

.container {
  position: relative;
}

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

首先，我们需要将容器的position属性设置为relative。然后，将需要垂直居中的div的position属性设置为absolute，并使用top和left属性将其置于容器的中心位置。最后，使用transform属性并将translate函数的参数设置为-50%以实现垂直居中。

以下是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  height: 300px;
  border: 1px solid black;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<div class="container">
  <div class="centered">垂直居中的div</div>
</div>

</body>
</html>

在上面的示例中，我们创建了一个高度为300px的容器，并使用position和transform属性将内部div垂直居中显示。

方法三：使用table布局

另一种实现垂直居中的方法是使用table布局。使用table布局可以很容易地将元素垂直居中，如下所示：

.container {
  display: table;
  width: 100%;
  height: 300px;
  text-align: center;
}

.centered {
  display: table-cell;
  vertical-align: middle;
}

首先，我们将容器的display属性设置为table，这将使容器以table的形式显示。然后，将容器的width属性设置为100%，这将使容器占满整个父容器的宽度。接下来，将容器的height属性设置为固定高度，以控制整体的高度，此处为300px。最后，通过设置容器的text-align属性为center来实现内部元素的水平居中，通过设置内部元素的display属性为table-cell来实现垂直居中。

以下是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: table;
  width: 100%;
  height: 300px;
  text-align: center;
  border: 1px solid black;
}

.centered {
  display: table-cell;
  vertical-align: middle;
  width: 200px;
  height: 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<div class="container">
  <div class="centered">垂直居中的div</div>
</div>

</body>
</html>

在上面的示例中，我们创建了一个高度为300px的容器，并使用table布局和table-cell属性将内部div垂直居中显示。

方法四：使用grid布局

使用grid布局也可以实现垂直居中。以下是一种常用的方法：

.container {
  display: grid;
  place-items: center;
  height: 300px;
}

首先，我们需要将容器的display属性设置为grid，这将使容器成为一个grid容器。接下来，使用place-items属性将div在容器中居中对齐。最后，设置容器的高度和宽度。

以下是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  place-items: center;
  height: 300px;
  border: 1px solid black;
}

.centered {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<div class="container">
  <div class="centered">垂直居中的div</div>
</div>

</body>
</html>