title: Ionic 4 center ion grid within ion-content
body: <p>I simply have an ion-content within that an ion-grid within that an h1.</p>
  
  <pre><code>&lt;ion-content no-padding no-bounce&gt;
      &lt;ion-grid no-padding&gt;
          &lt;h1&gt;ion-grid&lt;/h1&gt;
      &lt;/ion-grid&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>I have my ion-content set to 100vh, and the ion grid set to 80%; height. How do I vertically center the ion grid within the ion-content? And vertically center the h1 within the ion grid?</p>
  
  <p>I tried setting the ion-content to display flex (which I'm sure it already is) and also align-content center. Same with the ion-grid.</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>ion-content {
      display: flex;
      height: 100vh;
      width: 100vw;
      align-content: center;
  
      ion-grid {
          display: flex;
          height: 80%;
          width: 100%;
          background-color: blue;
          align-content: center;
      }
  }
  </code></pre>
  
  <p>Heres the result (the ion-grid is stuck to the top of ion-content rather than vertically centered so align-content: center does not work. Same with ion grid and the h1):</p>
  
  <p><a href="https://i.stack.imgur.com/qMJK0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qMJK0.png" alt="enter image description here"></a></p>