[分享]css两个div并排居中

在网页设计中，我们时常遇到需要两个div并排居中的情况，这时候使用CSS来实现就可以了。

div.container{
  display:flex;
  justify-content:center;
} 

div.box{
  width:100px;
  height:100px;
  background-color:gray;
  margin:0 10px;
} 

上述代码中，我们首先使用Flex布局，把父元素的display属性设置为flex，然后使用justify-content属性居中子元素，其中justify-content:center表示在水平方向上居中，而align-items:center表示在垂直方向上居中。

然后我们再来看子元素

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>