如何水平和垂直居中表格

Question

我尝试了5种不同的方式，表格不会垂直居中，无论我做什么，它都在页面中间。我做错了什么？

<ion-content no-bounce padding>
  <ion-list no-lines>
    <form [formGroup]="loginForm" (ngSubmit)="onLogin()" novalidate>

      <div class="loginForm">
        <ion-item>
          <p style="text-align: center">
            <img class="center-block text-center" src="">
          </p>
        </ion-item>

        <ion-item>
          <ion-label floating>Email</ion-label>
          <ion-input formControlName="email" type="email" id="email"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label floating>Password</ion-label>
          <ion-input formControlName="password" type="password" id="password"></ion-input>
        </ion-item>

        <button ion-button full color="primary" [disabled]="!loginForm.valid">Login</button>
      </div>
    </form>
  </ion-list>
</ion-content>

SCSS

.loginForm{
  display: flex!important;
  flex-direction: column;
  align-content: center!important;
  align-items: center!important;
  justify-content: center!important;
}

我也试过这样的

.loginForm{ 
   height: 100%;
  display: block;
  vertical-align: middle;
}

并且喜欢这个

.loginForm {
    height: 100%;
    display: block;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
}