Сделать разделы ниже друг от друга

Question

Я пытаюсь создать несколько разделов с размером окна просмотра, и мне нужно выровнять тест в центре и середине разделов. Я попытался дать 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 - 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>