[分享]css两个div同行水平居中

在Web开发中，CSS是一个重要的技术，用于实现网页的样式。在布局设计中，水平居中是常见的需求。下面介绍两个同行的div如何实现水平居中的方式。第一种方式是使用margin和auto，代码如下： ...

在Web开发中，CSS是一个重要的技术，用于实现网页的样式。在布局设计中，水平居中是常见的需求。下面介绍两个同行的div如何实现水平居中的方式。

第一种方式是使用margin和auto，代码如下：

 <div style="margin: 0 auto;">
    <div style="background-color: blue; width: 200px; height: 50px;"></div>
    <div style="background-color: green; width: 100px; height: 50px;"></div>
  </div> 

在外层div中设置margin为0 auto，表示左右两侧的margin都是auto，这样就可以实现外层div的水平居中。内层div的宽度也要通过CSS设置，外层div的宽度会自动填满剩余的空间。这样就可以实现两个同行的div的水平居中。

第二种方式是使用flex布局，代码如下：

 <div style="display: flex; justify-content: center;">
    <div style="background-color: blue; width: 200px; height: 50px;"></div>
    <div style="background-color: green; width: 100px; height: 50px;"></div>
  </div> 

在外层div中设置display为flex，并且设置justify-content为center，表示水平方向的布局方式为居中。这样就可以实现两个同行的div的水平居中，不需要再单独设置外层div的宽度。

以上是两种实现两个同行div水平居中的方式，根据实际需求可灵活选择合适的方式。