css 两个div居中并排

CSS是网页开发中必不可少的一部分，它能够使我们的网页更加美观、专业、易于操作。在CSS中，居中并排两个div是一个常见的需求。

    .container {
      display: flex;
      justify-content: center;
}
.box1, .box2 {
      width: 100px;
      height: 100px;
}
.box1 {
      background-color: blue;
}
.box2 {
      background-color: green;
}
    

要实现这个效果，我们可以使用flex布局。首先，我们需要在一个包含这两个div的容器中使用display:flex属性。接着，我们可以使用justify-content:center属性将这两个div垂直居中并排显示。

需要注意的是，我们还需要对每个div的宽度和高度进行设定，否则它们可能会变成默认的大小。在上面的代码中，我们对.box1和.box2都进行了大小的设定。此外，我们还对.box1和.box2分别设置了不同的背景颜色。

在使用flex布局时，我们可以根据实际需要进行其他的样式调整。例如，我们可以设置flex-direction、align-items、align-self等属性，以实现各种排版效果。

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