title: How to center a form horizontally and vertically
body: <p>I have tried 5 different ways and the form will not center vertically so that its in the middle of the page no matter what I do. What am I doing wrong?</p>
  
  <pre><code>&lt;ion-content no-bounce padding&gt;
    &lt;ion-list no-lines&gt;
      &lt;form [formGroup]="loginForm" (ngSubmit)="onLogin()" novalidate&gt;
  
        &lt;div class="loginForm"&gt;
          &lt;ion-item&gt;
            &lt;p style="text-align: center"&gt;
              &lt;img class="center-block text-center" src=""&gt;
            &lt;/p&gt;
          &lt;/ion-item&gt;
  
          &lt;ion-item&gt;
            &lt;ion-label floating&gt;Email&lt;/ion-label&gt;
            &lt;ion-input formControlName="email" type="email" id="email"&gt;&lt;/ion-input&gt;
          &lt;/ion-item&gt;
  
          &lt;ion-item&gt;
            &lt;ion-label floating&gt;Password&lt;/ion-label&gt;
            &lt;ion-input formControlName="password" type="password" id="password"&gt;&lt;/ion-input&gt;
          &lt;/ion-item&gt;
  
          &lt;button ion-button full color="primary" [disabled]="!loginForm.valid"&gt;Login&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>scss</p>
  
  <pre><code>.loginForm{
    display: flex!important;
    flex-direction: column;
    align-content: center!important;
    align-items: center!important;
    justify-content: center!important;
  }
  </code></pre>
  
  <p>I've also tried it like this</p>
  
  <pre><code>.loginForm{ 
     height: 100%;
    display: block;
    vertical-align: middle;
  }
  </code></pre>
  
  <p>and like this</p>
  
  <pre><code>.loginForm {
      height: 100%;
      display: block;
      vertical-align: middle;
      text-align: center;
      margin: 0 auto;
  }
  </code></pre>