html - 使各个部分位于彼此下方

Question

我正在尝试创建多个视口(viewport)大小的部分，并且我需要在部分的中心和中间对齐测试。我尝试使用 display: table-cell 来垂直对齐文本，但随后各部分彼此相邻。

我创建了FIDDLE

html:

   <div id="main">
        <section id="home">
            gf
        </section>
        <section id="about">
            gh
        </section>
        <section id="contactMe">
            gf
        </section>
  </div>

CSS:

#main{
    vertical-align: middle;
    width:100%;
    text-align: center;
}
#home{
    background-color: green;
    background-size: cover;
    height:100vh;
    width: 100vw;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#about{
    background-color: blue;
    background-size: cover;
    height:100vh;
    width: 10vw;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#contactMe{
    background-color: red;
    background-size: cover;
    height:100vh;
    width: 100vw;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

感谢任何帮助。

如果需要更多信息，请在评论中提及。谢谢。

编辑:各部分应位于彼此下方

Answer 1

这是一种使其发挥作用的快速方法。将文本包裹在 div 中，然后将 display: table 应用于 section 元素，然后将 display: table-cell code> 到 div 的。

#main{
    vertical-align: middle;
    width:100%;
    text-align: center;
}
#main section {
    background-size: cover;
    height:100vh;
    width: 100vw;
    display: table;
}
#main section div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#home{
    background-color: green;
}
#about{
    background-color: blue;
}
#contactMe{
    background-color: red;
}

<div id="main">
  <section id="home">
    <div>gf</div>
  </section>
  <section id="about">
    <div>gh</div>
  </section>
  <section id="contactMe">
    <div>gf</div>
  </section>
</div>