将子div放在父div中居中

Question

我希望“圆形容器”的最大宽度为300px。 但是当浏览器的宽度超过1200px时，我希望我的4个子div（最大宽度为300px）在浏览器中居中。 它们当前位于左侧。

这是我的html和CSS。

任何提示将不胜感激：）

.getstartedcirclescontainer {
  height: 650px;
  width: 100%;
  display: flex;
  text-align: center;
  background-image: linear-gradient(#3329ff, white);
}

.circlecontainer {
  height: 100%;
  width: 24.9%;
  padding-top: 175px;
  background-color: rgba(0, 0, 0, 0.1);
  max-width: 300px;
}

.circle1 {
  height: 170px;
  width: 170px;
  border-radius: 50%;
  background-image: linear-gradient(#8680ff, #5a52ff);
  margin: 0 auto;
  border-style: solid;
  border-width: 2px;
  border-color: #fff;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .66);
}

<div class="getstartedcirclescontainer">

  <div class="circlecontainer">
    <div class="circle1">

    </div>
  </div>

  <div class="circlecontainer">
    <div class="circle1">

    </div>
  </div>

  <div class="circlecontainer">
    <div class="circle1">

    </div>
  </div>

  <div class="circlecontainer">
    <div class="circle1">

    </div>
  </div>

</div>

Answer 1

只需将text-align: center;的{​​{1}}替换为justify-content: center;。

HTML：

.getstartedcirclescontainer

CSS：

<div class="getstartedcirclescontainer">

  <div class="circlecontainer">
    <div class="circle1">

    </div>
  </div>

  <div class="circlecontainer">
    <div class="circle1">

    </div>
  </div>

  <div class="circlecontainer">
    <div class="circle1">

    </div>
  </div>

  <div class="circlecontainer">
    <div class="circle1">

    </div>
  </div>

</div>