CSSの高さが垂直で、ヘッダーと段落の中心を合わせる

Question

私は下に段落があるヘッダーを持っています。私は縦にも横にもそれらを中心にしようとしています。問題は、私は最小の高さを持っているので、高さは変更される可能性があります。最小の高さの意図は、ホームコンテナがコンテンツの量に基づいて高さを拡張できるようにすることです。これをどうやってやりますか？

I was originally using this bit of code. But it doesn't work with a minimum height due to the height change. 

position: relative; 
top: 50%; 
transform: translateY(-50%); 

がここにここに私のHTML

<div id="home-container" class="pages"> 

    <div id="home-container-title"> 

     <h1>Title</h1> 

     <p>Noster et commodo, voluptate voluptatibus in admodum, consequat legam commodo 
      commodo, varias singulis mentitum, si anim noster nisi pariatur, cillum 
      cupidatat arbitror se sed quid in amet nam ipsum admodum et consequat. Non elit 
      singulis appellat iis eiusmod aliqua elit hic aute. Nisi iudicem non aliquip. 
      Dolore commodo eiusmod ea id varias quorum malis incididunt, ea legam culpa 
      noster laboris est se veniam cohaerescant. Cupidatat ab magna appellat. Nisi 
      commodo aliquip, aliqua deserunt ne instituendarum de mandaremus elit vidisse 
      eiusmod ita minim consequat do nisi sunt. Do velit graviterque est ne illum 
      commodo laboris iis ipsum praetermissum fabulas eram arbitror ea non quae 
      aliquip commodo. Ut ex noster nostrud a culpa nam tempor et noster, quo id dolore laboris, 
      vidisse summis incurreret nam nisi qui pariatur quo dolore qui illum singulis o 
      laboris, ut tamen amet quo laborum, id a quid doctrina. E nisi duis multos 
      incurreret a possumus quid eram mandaremus tamen. Doctrina an mandaremus aut o 
      quae aliquip voluptate. Eu aliqua commodo relinqueret, ubi quem malis nam 
      ullamco ubi se quis labore fugiat expetendis o nescius ad incididunt, do tamen 
      officia laboris iis ita lorem enim varias fabulas sed nulla ab in culpa arbitror 
      an a irure sunt non incurreret. Ad amet culpa ut quamquam de ipsum consequat 
      praetermissum. Si noster culpa do nescius, quo sed coniunctione.</p> 

    </div> 

</div> 

だ私のCSS

.pages { 
min-height: 100%; 
min-width: 100%; 
} 

#home-container { 
background-color: rgba(255,146,148,0.60); 
background-color: rgba(255,146,148); 
z-index: -1; 
margin: 0; 
padding: 0; 
} 

#home-container-title { 
margin: 0 auto; 
text-align: center; 
width: 50%; 
font-family: 'Varela Round', sans-serif; 
} 

#home-container-title h1 { 
margin: 0; 
padding: 0; 
font-weight: bold; 
text-transform: uppercase; 
border-bottom: 2px solid #000000; 
} 

#home-container-title p { 
color:#e2e2e2; 
font-weight: normal; 
} 

#about-container { 
background-color: #ffffff; 
position: relative; 
top: 0px; 
z-index: -1; 
margin: 0; 
padding: 0; 
} 

ページクラスの目的だが、家庭の容器のような複数のdivのを保持することです。

私は家のコンテナの下に約コンテナを持っています。しかし、それは不必要なスペースのギャップを持っています。

Answer 1

フレキシボックスには、それを行うことができます。

Codepen Demo

html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    min-height: 100%; 
 
    padding:0; 
 
    margin:0; 
 
} 
 
.pages { 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
#home-container { 
 
    background-color: rgba(255, 146, 148, 0.60); 
 
    background-color: rgba(255, 146, 148); 
 
    z-index: -1; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#home-container-title { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    width: 50%; 
 
    font-family: 'Varela Round', sans-serif; 
 
} 
 
#home-container-title h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    border-bottom: 2px solid #000000; 
 
} 
 
#home-container-title p { 
 
    color: #e2e2e2; 
 
    font-weight: normal; 
 
} 
 
#about-container { 
 
    background-color: #ffffff; 
 
    position: relative; 
 
    top: 0px; 
 
    z-index: -1; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="home-container" class="pages"> 
 

 
    <div id="home-container-title"> 
 

 
    <h1>Title</h1> 
 

 
    <p>Noster et commodo, voluptate voluptatibus in admodum, consequat legam commodo commodo, varias singulis mentitum, si anim noster nisi pariatur, cillum cupidatat arbitror se sed quid in amet nam ipsum admodum et consequat. Non elit singulis appellat 
 
     iis eiusmod aliqua elit hic aute. Nisi iudicem non aliquip..</p> 
 

 
    </div> 
 

 
</div>