title: Vertically centering div inside parent with viewport height
body: <p>So I have this div with 100vh - 55px height, and I have a div inside that I want centered vertically inside the parent no matter what. How would I go on about doing this? This is what I have now: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* home.css | By Seb R | Ekchö */
  
  .lander {
    height: calc(100vh - 55px);
    background: blue;
    overflow: hidden;
  }
  .lander .content {
    height: 300px;
    margin-top 30vh;
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="lander"&gt;
    &lt;div class="content"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What am I doing wrong?</p>