[HTML][CSS] Div 包含另外 3 个 div 不会居中

Question

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

我有一个大 div 容器，里面还有 3 个 div，但我找不到将大 div...

希望我正确粘贴了 html 和 css 代码，当我必须为每一行点击 space 时它会变得混乱 lol

<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: "1C";
  color:#b19530;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  content: '';
}

And this is the picture guys.Thanks!

Answer 1

Updated my answer because of extra information - see comments for the discussion and relevant changes.

我使用 Flex box 将推荐书均匀居中。

* {
  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: "1C";
  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>

[HTML][CSS] Div 包含另外 3 个 div 不会居中

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

html

css

containers

center