CSS 居中两个div在包容器的中间位置

在本文中，我们将介绍如何使用CSS将两个div元素居中在包容器的中间位置。这是一个常见的布局需求，通过掌握居中布局的技巧，您可以轻松地实现这个效果。

阅读更多：CSS 教程

水平居中

要实现水平居中，我们可以使用margin属性和auto值。首先，我们需要创建一个包容器，即一个父级div元素，其作用是将两个子div元素放在一起。接下来，我们设置子div元素的左右margin为auto，这样它们就会在水平方向上自动居中。

.wrapper {
  display: flex;
  justify-content: center;
}

.box {
  margin-left: auto;
  margin-right: auto;
}

在上面的代码中，我们使用了flex布局来创建包容器，并设置其justify-content属性为center，以实现子元素的水平居中。然后，在.box类中，我们将左右margin都设置为auto，以实现子元素的水平居中。

以下是一个示例代码，展示如何实现水平居中：

<div class="wrapper">
  <div class="box">
    <p>Content 1</p>
  </div>
  <div class="box">
    <p>Content 2</p>
  </div>
</div>

通过将上面的代码添加到HTML文件中，并应用上述CSS样式，您将看到两个子元素被水平居中放置在包容器中间位置。

要实现垂直居中，我们可以使用flex布局和align-items属性。我们可以将align-items属性设置为center，以实现子元素在垂直方向上的居中对齐。

以下是实现垂直居中的示例代码：

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

.box {
  margin-bottom: auto;
  margin-top: auto;
}

在上面的代码中，我们在包容器的CSS样式中添加了align-items属性，并设置其值为center。然后，在.box类中，我们将上下margin都设置为auto，以实现子元素的垂直居中。

现在，将上述的示例代码添加到HTML文件中，并应用上述CSS样式，您将看到两个子元素在包容器的垂直中间位置。

要实现水平和垂直同时居中，我们可以将上述的水平居中和垂直居中方法进行组合。

以下是实现水平和垂直居中的示例代码：

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

.box {
  margin: auto;
}

通过上述代码，我们可以同时实现水平和垂直居中。在.wrapper类中，我们使用了flex布局、justify-content属性和align-items属性来实现水平和垂直居中。在.box类中，我们将margin设置为auto，使子元素在水平和垂直方向上均居中。

现在，将上面的示例代码添加到HTML文件中，并应用上述CSS样式，您将看到两个子元素同时位于包容器的中间位置。

通过学习本文，您了解到如何使用CSS将两个div元素居中在包容器的中间位置。您掌握了水平居中、垂直居中以及同时实现水平和垂直居中的方法。通过灵活运用这些技巧，您可以轻松地实现各种居中布局的需求。希望本文对您有所帮助！