html - 在父部分中水平对齐多个 div

Question

我在父部分中有几个 div，我正在尝试对齐以使 div 在部分中居中。就像现在一样，div 是左对齐的。我试过执行 margin: 0 auto 但这不起作用。谁能解释我如何才能做到这一点？

Pen

section {
  margin-bottom: 10px;
  width: 100vw;
  height: 100vh;
}

.notice {
  width: 50vw;
  height: 10vh;
}

section .socialmedia{
    background-color: red;
    width: 100vw;
    height: 15vh;
}
//The divs I'm trying to center
section .icon{
    margin: 0 auto;
    width: 15vw;
    height: 15vh;
    background-color: green;
}

<section>
  <div class="notice">
    <h1>Our website is currently undergoing construction, please feel free to contact us on social media.</h1>
  </div>
  <div class="socialmedia">
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
  </div>
</section>

Answer 1

.socialmedia { text-align: center; }
.icon { display: inline-block; }

并从 .icon 中删除 float。