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

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>

垂直中心标题＆amp; CSS中具有最小高度的段落

1 个答案: