html - 在父 div 中居中子 div

Question

我希望“圆形容器”的最大宽度为 300 像素。 但是当浏览器的宽度超过 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; 替换为 justify-content: center; 即可用于 .getstartedcirclescontainer。

HTML:

<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>

CSS:

.getstartedcirclescontainer {
      height: 650px;
      width: 100%;
      display: flex;
      justify-content: 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);
}