CSS 在另一个容器中垂直居中两个Div

在本文中，我们将介绍如何使用CSS将两个Div垂直居中在另一个容器中。垂直居中是网页布局中常见的需求之一，特别是当我们希望两个Div在一个容器中居中对齐时。

阅读更多：CSS 教程

使用Flexbox进行垂直居中

Flexbox是CSS中用于布局的强大工具之一。通过使用Flexbox，我们可以轻松地垂直居中两个Div。以下是一个示例：

<div class="container">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.div1, .div2 {
  width: 200px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

在上面的示例中，外部容器.container使用display: flex属性，这使得容器内的元素按照Flexbox模型进行布局。flex-direction: column属性确保内部元素垂直排列。

接下来，我们使用justify-content: center和align-items: center属性，将内部元素在容器中垂直居中。注意，我们还设置了容器的高度为300px，这是为了使示例更加清晰。

运行此示例，我们将看到两个Div在容器中垂直居中对齐。

这种方法非常简单和直观，Flexbox提供了许多强大的布局选项，值得进一步研究和使用。

使用Grid进行垂直居中

另一个CSS布局工具是Grid布局。通过使用Grid，我们可以实现更复杂的布局，其中包含多个元素的垂直居中。以下是一个使用Grid进行垂直居中Div的示例：

<div class="container">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
</div>

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

.div1, .div2 {
  width: 200px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

在上述示例中，我们将外部容器.container的display属性设置为grid，以启用Grid布局。然后，我们使用place-items: center属性将内部元素在容器中垂直居中。

由于Grid布局的功能非常强大，我们可以使用更多的网格配置选项来调整内部元素的位置。

使用position和transform进行垂直居中

如果你不想依赖于Flexbox或Grid，还可以使用position和transform属性来实现垂直居中。以下是一个示例：

<div class="container">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
</div>

.container {
  position: relative;
  height: 300px;
}

.div1, .div2 {
  width: 200px;
  height: 50px;
  background-color: lightblue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在上述示例中，我们将外部容器.container的position属性设置为relative，以创建一个相对定位的容器。

然后，内部元素.div1和.div2的position属性设置为absolute，使它们脱离文档流。通过使用top: 50%和left: 50%属性，我们将元素定位在容器的中心。

最后，我们使用transform: translate(-50%, -50%)属性将元素向左和向上移动50%的宽度和高度，以完全居中对齐。