[分享]css两个盒子间距30水平居中

CSS样式是构建网页设计的基础，经常会遇到需要在两个盒子之间留白并且水平居中的需求。那么该如何实现呢？

.box1 {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: #f5f5f5;
  margin: 0 30px;
}

.container {
  text-align: center;
} 

首先，我们需要给两个盒子分别添加类名.box1和.box2，其中.box1是要求不添加间距的盒子，.box2是要求添加间距的盒子。给.box2添加margin属性，并设置左右各为30px即可实现间距为30的效果。

另外，在实现水平居中的时候，可以将两个盒子放在一个容器中，给该容器添加类名.container，并给该容器设置text-align: center;，即可使两个盒子在水平方向上居中。

 <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div> 

以上就是实现两个盒子间距为30且水平居中的方法，希望对大家有所帮助。