css 两个div水平居中

CSS是网页开发中必不可少的一部分，它可以提升网页的外观和交互效果。当我们需要让网页中的两个div元素水平居中时，CSS就能派上用场。下面就是实现的代码：

  style>
    .container {
          display: flex;
          justify-content: center;
          align-items: center;
    }
    .box {
          width: 200px;
          height: 100px;
          background-color: #ccc;
    }
      /style>
      div class="container">
        div class="box">
    /div>
        div class="box">
    /div>
      /div>
    

上面的代码中，我们创建了一个名为.container的div元素，使用了display: flex属性，使它的内部元素按照水平方向排列。而justify-content: center和align-items: center属性则让它们在整个的容器中居中对齐。然后我们创建了两个名为.box的div元素，它们由.container元素包裹。最后，我们为它们设置了背景颜色和尺寸。

通过这样的设置，我们就能轻松地让网页中的两个div元素水平居中了。

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