Vertically Aligned Flex Items not Aligning Correctly

Question

I have some nested elements that have "display: flex" set to them with the inner div having "flex-direction: column", so that it's child elements stack vertically.

How do I get it so all of the content in the red, inner div is vertically centred properly, these flex-items are different HTML element types and they're not doing this? If you see from the example below, the space above the H1 title is notably larger than below the bottom anchor link yet the inner div has a standard padding value of 1rem on each side and i'm following the w3 specification.

I've made the h1 title larger to highlight the issue.

Codepen: https://codepen.io/emilychews/pen/VymXKY

CSS

#section-1 {
 display: flex;
 margin: 0 auto; 
 width: 100%; height: 500px;
 background-color: blue; 
 box-sizing: border-box;}

#row-1 {
 display:flex;
 justify-content: center;
 margin: auto;
 padding: 1rem;
 background-color: red;
 width: 70%;
 max-width: 1043px;
 box-sizing: border-box;
 }

#row-1 .inner {
 display: flex;
 flex-direction: column;
 justify-content: center;
 box-sizing: border-box;
 padding: 1rem; 
}

#row-1 .inner h1, #row-1 .inner h3, #row-1 .inner p {
color: white; text-align: center;
}
#row-1 .inner hr {border:0; background:white; width: 75px; height: 5px;}
.inner h1 {font-size: 40px;}

HTML

<section id="section-1">
  <div id="row-1">
    <div class="inner" >
      <h1>SOME WORDS TO MAKE A TITLE</h1>
      <h3>My subheading. Your subheading.</h3>
      <p>A random sentance about something or other.<br />
        Another random sentance about something or other.</p>
      <hr>
      <p><a href="#">LEARN MORE</a></p>
    </div>
  </div>
</section>

Answer 1

Elements like h1 , p and hr has predefined margins, and as they aren't the same, you get the result described/showed.

Give them all an equal top/bottom margin, eg

.inner > * {
  margin: 10px auto;
}

Stack snippet

 #section-1 { display: flex; margin: 0 auto; width: 100%; height: 500px; background-color: blue; box-sizing: border-box; } #row-1 { display: flex; justify-content: center; margin: auto; padding: 1rem; background-color: red; width: 70%; max-width: 1043px; box-sizing: border-box; } #row-1 .inner { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding: 1rem; } #row-1 .inner h1 { color: white; text-align: center; margin-top: 0; padding: 0; } #row-1 .inner h3 { color: white; text-align: center; } #row-1 .inner p { color: white; text-align: center; } #row-1 .inner pa { color: white; text-align: center; margin: 0; padding; 0; } #row-1 .inner hr { border: 0; background: white; width: 75px; height: 5px; } .inner h1 { font-size: 40px; } .inner > * { margin: 10px auto; /* added */ } 

 <section id="section-1"> <div id="row-1"> <div class="inner"> <h1>SOME WORDS TO MAKE A TITLE</h1> <h3>My subheading. Your subheading.</h3> <p>A random sentance about something or other.<br /> Another random sentance about something or other.</p> <hr> <p id="lowerlink"><a href="#">LEARN MORE</a></p> </div> </div> </section>