css 两个div 垂直居中显示

CSS是一种样式表语言，可以用它来设计网页样式。在网页制作中，经常会用到布局，而布局中有时需要将两个div垂直居中显示。下面是一个示例：

style>
  .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
  }
    .content {
        width: 300px;
        height: 150px;
        background-color: #eee;
  }
    /style>
    div class="container">
      div class="content">
        p>
    这是一个垂直居中的div/p>
        p>
    这是另一个垂直居中的div/p>
      /div>
    /div>
    

在上面的代码中，我们使用了flexbox布局来实现两个div垂直居中显示。

首先，我们给最外层的div添加了一个class为container，并设置了它的高度为100vh，也就是屏幕的高度。

然后，在container内部创建了一个class为content的div，这个div就是我们需要垂直居中的div。我们给它设置了一个固定的宽度和高度，并设置了背景色。

最后，我们在container的样式中使用了display:flex，这就使得其内部的元素都变成了一个弹性盒子。然后，通过设置justify-content:center和align-items:center来使得内部的元素水平和垂直居中显示。

通过这种方法，我们可以轻松地实现两个div的垂直居中显示，而不需要使用定位或其他复杂的方法。这使得我们的代码更简洁、易懂，并且可以提高开发效率。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！