Colton Colton - 6 months ago 12
CSS Question

Vertically Center a Header & Paragraph with a Minimum Height in CSS

I have a header, with a paragraph below it. I am trying to both vertically, and horizontally center them. The problem is, I've got a minimum height, therefore the height is subject to change. The intent of the minimum height is to allow for the the home-container to extend the height based on how much content is in it. How would I go about doing this?

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%);


Here's my 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>


Here's my 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;
}


The purpose of the pages class, is to hold multiple div's like the home-container.

I have an about-container below the home-container. Although, it has a gap of unwanted space.

Answer

Flexbox can do that:

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>