[HTML][CSS] Div containing another 3 divs won't center [duplicate]

Question

我的一个 div 容器有另一个问题。我尝试了各种方法来修复它，但看不到问题，所以这就是我再次在这里发帖的原因。

我有一个大 div 容器，里面还有另外 3 个 div，但我找不到使大 div 居中的方法...

希望我正确粘贴了 html 和 css 代码，当我必须为每一行点击空格时会让人感到困惑，哈哈

<div class="section3 center">

<div class="section3Container center">

    <div class="person" style="float:left">
        <blockquote>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
        </blockquote>
        <img src="images/nicholas.png" width="150px">
        <h4>Placeholder_Name</h4>
    </div>

    <div class="person">
        <blockquote>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
        </blockquote>
        <img src="images/rebeca.png" width="150px">
        <h4>Placeholder_Name</h4>
    </div>

    <div class="person">
        <blockquote>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
        </blockquote>
        <img src="images/gloria.png" width="150px">
        <h4>Placeholder_Name</h4>
    </div>



   </div>
</div>

 ----CSS----
.section3 {
  width:50%;
  height:500px;
  background-color:#adaba7;
}

.section3Container {
  margin-top:50px;  
}

.person {
  width:30%;
  float:left;
}

.person img {
  display:table;
  margin:0 auto;
  margin-bottom:30px;
 }

.person h4 {
  text-align:center;
}

blockquote{
  text-align:center;
  font-size:15px;
  font-style:italic;
  color: #555555;
  padding:17px 15px;
  border-left:8px solid #b19530; 
  position: relative;
  background:#e2e1dc;
  border-radius:50px;
  margin-bottom:20px;

}

blockquote::before{
  content: "\201C";
  color:#b19530;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  content: '';
}

And this is the picture guys.Thanks!

Answer 1

更新了我的答案，因为有额外的信息 - 请参阅 cmets 讨论和相关更改。

我使用 Flex 框将推荐信均匀居中。

* {
  margin: 0;
  padding: 0;
  border: 0 none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

html {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0 none;
}

.center {
  display: table;
  margin: auto;
}

.section3 {
  width: 50%;
  background-color: #adaba7;
}

.section3 p {
  color: white;
  text-align: center;
  font-size: 30px;
  margin-top: 30px;
  font-weight: bold;
}

.section3Container {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.person {
  width: 30%;
  margin-bottom: 30px;
}

.person img {
  display: table;
  margin: 0 auto;
  margin-bottom: 30px;
}

.person h4 {
  text-align: center;
  color: white;
  font-size: 18px;
}

blockquote {
  text-align: center;
  font-size: 15px;
  font-style: italic;
  color: #555555;
  padding: 17px 15px;
  border-left: 8px solid #b19530;
  position: relative;
  background: #e2e1dc;
  border-radius: 50px;
  margin-bottom: 20px;
}

blockquote::before {
  content: "\201C";
  color: #b19530;
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -10px;
}

blockquote::after {
  content: '';
}

<div class="section3 center">
  <p>Testimonials</p>

  <div class="section3Container">

    <div class="person">
      <blockquote>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </blockquote>
      <img src="images/nicholas.png" width="150px">
      <h4>Placeholder_Name</h4>
    </div>

    <div class="person">
      <blockquote>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </blockquote>
      <img src="images/rebeca.png" width="150px">
      <h4>Placeholder_Name</h4>
    </div>

    <div class="person">
      <blockquote>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </blockquote>
      <img src="images/gloria.png" width="150px">
      <h4>Placeholder_Name</h4>
    </div>

  </div>
</div>