Flexbox Hero Won't Center

Question

I'm at a loss why justify-self won't work for my .hero-content.

I'm trying to have my .hero-content centered horizontally and vertically, and it is centered horizontally but vertically it still sits pushed to the top. Not sure what to do.

.hero {
 height: 100vh;
 width: 100vw;
 background-image: url("../img/main.jpg");
 background-size: cover;
 color: #ffffff;
 display: flex;
 flex-direction: column;
}

header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 25px 50px;
 opacity: 0;
 animation: fadeIn 1s .5s forwards;
}

.hero-content {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

<section class="hero">
 <header>
   <a href="#" class="logotype">Mountain Travel</a>
   <nav>
     <ul class="top-nav__menu">
      <li class="top-nav__menu-item"><a href="#">Tours</a></li>
      <li class="top-nav__menu-item"><a href="#">About</a></li>
      <li class="top-nav__menu-item"><a href="#">Contact Us</a></li>
    </ul>
   </nav>
 </header>
 <div class="hero-content">
  <h2>Mountain Travel</h2>
  <h3 class="small-margin-top">Unmissable Adventure Tours Around the World</h3>
  <button class="cta">Contact Us Now</button>
 </div>
</section>

Answer 1

You need to set flex-grow: 1 in your .hero-content.

Demo (view full page)

.hero {
 height: 100vh;
 width: 100vw;
 background-image: url("../img/main.jpg");
 background-size: cover;
 color: #ffffff;
 display: flex;
 flex-direction: column;
}

header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 25px 50px;
 opacity: 1;
 animation: fadeIn 1s .5s forwards;
}

.hero-content {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 flex-grow: 1;
}

/************** 
** DEMO ONLY **
**************/

.hero-content h2 {
  margin-top: 0;
}

.hero-content {
  background-color: #eee;
}

.hero-content * {
  color: #333;
}

<section class="hero">
 <header>
   <a href="#" class="logotype">Mountain Travel</a>
   <nav>
     <ul class="top-nav__menu">
      <li class="top-nav__menu-item"><a href="#">Tours</a></li>
      <li class="top-nav__menu-item"><a href="#">About</a></li>
      <li class="top-nav__menu-item"><a href="#">Contact Us</a></li>
    </ul>
   </nav>
 </header>
 <div class="hero-content">
  <h2>Mountain Travel</h2>
  <h3 class="small-margin-top">Unmissable Adventure Tours Around the World</h3>
  <button class="cta">Contact Us Now</button>
 </div>
</section>