html - 在 CSS 中以最小高度垂直居中标题和段落

Question

我有一个标题，下面有一段。我正在尝试将它们垂直和水平居中。问题是，我有一个最小高度，因此高度可能会发生变化。最小高度的目的是允许 home-container 根据其中的内容来扩展高度。我该怎么做呢？

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。

我在 home-container 下面有一个 about-container。虽然，它有一个不需要的空间间隙。

Answer 1

Flexbox 可以做到这一点:

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>