html - 垂直对齐 div 的中心

Question

我有以下代码:

body {
  height: 100%;
}
section {
  height: 70%;
}
.first {
  height: 10%;
}
.second {
  height: 10%;
}
.third {
  height: 10%;
}

<section class="main-container">
  <div class="first">
    content goes here
  </div>
  <div class="second">
    content goes here
  </div>
  <div class="third">
    content goes here
  </div>
</section>

我需要first、second 和third 类的内容应该垂直居中。

Answer 1

如果你想使用css3 flexbox，你可以这样做:

.main-container {
    height:calc(100vh);
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.first,
.second,
.third {
  flex: 0 1 auto;
}

<section class="main-container">
  <div class="first">
    content goes here
  </div>
  <div class="second">
    content goes here
  </div>
  <div class="third">
    content goes here
  </div>
</section>