[分享]css两个div垂直居中flex

在CSS中，垂直居中一直是一个常见难点。但是，使用flex布局可以轻松实现垂直居中并且可读性很强且易于维护。下面我们来看一下如何使用flex布局垂直居中两个div。 Box 1 Box 2 ...

在CSS中，垂直居中一直是一个常见难点。但是，使用flex布局可以轻松实现垂直居中并且可读性很强且易于维护。下面我们来看一下如何使用flex布局垂直居中两个div。

  <div class="container">
      <div class="box1">
        <p>Box 1</p>
      </div>
      <div class="box2">
        <p>Box 2</p>
      </div>
    </div> 

这是一个包含两个div的容器。现在，我们将使用CSS属性来使它们垂直居中。

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

    .box1, .box2 {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .box1 {
      margin-right: 50px;
    } 

在这个示例中，我们首先将容器设置为flex，并使用align-items和justify-content属性将内容垂直和水平居中。这使得容器中的所有内容都垂直居中了。接下来，我们将两个div分别设置为flex，并使用align-items和justify-content属性将它们垂直和水平居中；同时，还添加了一个较大的间距，使它们相互分隔。

现在，大功告成！运行代码并让您的盒子垂直居中！

总之，使用flex布局可以轻松实现CSS两个div垂直居中。这是一个强大的功能，可大大提高页面布局的可读性，简化代码并减少复杂性。