如何让五个圆形在父DIV中居中对齐且保持均等间距？

我明白你想要实现的效果：五个圆形在父DIV里居中对齐，宽度和父容器匹配，同时元素之间保持均匀的内边距。之前用父DIV左外边距的方法没达到预期，咱们来调整一下布局，利用Bootstrap的特性和CSS flex来搞定它。

问题分析 #

你当前用了Bootstrap的col-lg-2，五个这样的列加起来是10个栅格，剩下2个栅格的空间留在右侧，所以整体会左对齐，没法居中。另外，.circles用了display: inline-block，虽然能横向排列，但间距控制不够灵活。

解决方案 #

1. 调整Bootstrap行的对齐方式 #

Bootstrap的.row本身是flex容器，我们可以给它添加justify-content-center类，让子元素（列）在水平方向上居中。同时，为了让五个列在大屏幕上均匀分布，我们可以调整列的宽度，或者自定义间距。

2. 优化圆形元素的布局 #

去掉.circles的display: inline-block，因为列已经帮我们做了横向排列，我们只需要确保圆形在列内居中，并且控制列之间的间距。

修改后的代码 #

HTML部分

<div class="container-fluid">
  <div class="row justify-content-center"> <!-- 添加justify-content-center让列居中 -->
    <fieldset>
      <legend>Veja como é fácil participar</legend>
      <!--CÍRCULO AMARELO-->
      <div class="col-lg-2 col-md-6 col-sm-12 d-flex justify-content-center"> <!-- 添加d-flex justify-content-center让圆形在列内居中 -->
        <div class="circles circle-yellow">
          <img class="img-responsive" src="\galeria\repositorio\images\landing\mensalidades-iguais\money.png">
          <p>Mensalidades que cabem no seu bolso</p>
        </div>
      </div>
      <!--CÍRCULO VERMELHO-->
      <div class="col-lg-2 col-md-6 col-sm-12 d-flex justify-content-center">
        <div class="circles circle-red">
          <h1>12x</h1>
          <p>parcelas iguais</p>
        </div>
      </div>
      <!--CÍRCULO AZUL CLARO-->
      <div class="col-lg-2 col-md-6 col-sm-12 d-flex justify-content-center">
        <div class="circles circle-light-blue">
          <p>curso</p>
          <span>R$</span>
          <h1>162</h1>
          <p>mensais</p>
          <small>R$ 1.944,00 ANUAL</small>
        </div>
      </div>
      <!--CÍRCULO AZUL CIANO-->
      <div class="col-lg-2 col-md-6 col-sm-12 d-flex justify-content-center">
        <div class="circles circle-blue">
          <p>material didático</p>
          <span>R$</span>
          <h1 class="blue-parcelas">37</h1>
          <p>mensais</p>
          <small>R$ 444,00 ANUAL</small>
        </div>
      </div>
      <!--CÍRCULO AZUL ESCURO-->
      <div class="col-lg-2 col-md-12 col-sm-12 d-flex justify-content-center">
        <div class="circles circle-dark-blue">
          <p>total</p>
          <span>R$</span>
          <h1>162</h1>
          <p>mensais</p>
          <small>R$ 1.944,00 ANUAL</small>
        </div>
      </div>
    </fieldset>
  </div>
</div>

CSS部分

.circles {
  height: 200px;
  width: 200px;
  border-radius: 50%; /* 用50%更简洁实现圆形 */
  margin: 20px 0; /* 调整上下间距，左右间距由列的padding控制 */
  text-align: center;
  padding: 20px;
  /* 去掉display: inline-block，因为列已经是flex容器负责排列 */
}

/* 其他颜色类样式保持不变，这里只列关键修改 */
.circle-yellow {
  background-color: rgb(249, 235, 74);
}
.circle-yellow img {
  margin: 0 auto;
  width: 50px;
}
.circle-yellow p {
  font-size: 20px;
  margin: 0;
  text-align: center;
}

.circle-red {
  background-color: rgb(216, 3, 25);
}
.circle-red h1 {
  padding-top: 15px;
  font-weight: bold;
  font-size: 60px;
  margin: 0;
  color: white;
}
.circle-red p {
  font-size: 33px;
  line-height: 30px;
  margin: 0;
  padding-left: 12px;
  text-align: center;
  color: white;
}

/* 其余颜色类样式省略，保持你原有的样式即可 */

/* 可选：如果需要更均匀的列间距，可以自定义列的padding */
@media (min-width: 992px) {
  .col-lg-2 {
    padding-left: 15px;
    padding-right: 15px;
  }
}

为什么这样修改？ #

• justify-content-center让.row里的列在水平方向居中，解决了之前左对齐的问题。
• d-flex justify-content-center让每个列里的圆形元素居中，确保圆形在列内不会偏移。
• 去掉display: inline-block避免了inline元素自带的间距问题，同时利用Bootstrap的栅格系统来控制列的宽度和间距。
• 用border-radius: 50%代替固定的200px，让圆形更自适应（不过你原来的宽高都是200px，效果一样，但更规范）。

这样调整后，五个圆形会在父容器中居中，宽度和父容器对齐，元素之间的间距也会均匀一致，在不同屏幕尺寸下也能保持良好的响应式效果。

内容的提问来源于stack exchange，提问作者Pelicer