イオンカードの中心を中心に整列[IONIC]

Question

私はログインフォームを開発していますので、<ion-content padding >の中には<ion-card>（ログインフォームのコンテナのように使われています）があります。私はCSSのフレックスボックスや他のCSSのトリックでさまざまな方法を試みたが、何も私のために働いた！カードはページの上部に残ります。 私を助けてもらえますか？

<ion-card id = "login-card"> 
    <form [formGroup]="signInForm" (submit)="doEmailPswLogin()" class="input"> 
     <ion-list> 

      <ion-item> 
      <ion-label fixed>Email</ion-label> 
      <ion-input type="email" [(ngModel)]="email" formControlName="email"></ion-input> 
      </ion-item> 

      <ion-item> 
      <ion-label fixed>Password</ion-label> 
      <ion-input type="password" [(ngModel)]="password" formControlName="password"></ion-input> 
      </ion-item> 


      <div padding> 
      <button ion-button color="primary" block [disabled]="buttonDisabled">Effettua il login</button> 
      </div> 

     </ion-list> 
     </form> 
</ion-card> 

私は、このページに作用するSCSSのいずれかの種類を持っていません。私がしたすべてのテストは、カードの余白部分を使用する以外は役に立たなかった（カードは1ミリメートル移動しなかった）が、それを行う正しい方法ではない、私は何か反応したい！ ありがとうございます！

SOLUTION

私はこのコードを使用して、私のカードは、それは今中心です！

<ion-grid style="height: 100%"> 
    <ion-row justify-content-center align-items-center style="height: 100%"> 
     <ion-card id = "login-card"> 
     <form > 
      <ion-list> 

      <ion-item> 
       <ion-label fixed>Email</ion-label> 
       <ion-input type="email" name="email"></ion-input> 
      </ion-item> 

      <ion-item> 
       <ion-label fixed>Password</ion-label> 
       <ion-input type="password" name="password"></ion-input> 
      </ion-item> 


      <div padding> 
       <button ion-button color="primary" block >Effettua il login</button> 
      </div> 

      </ion-list> 
     </form> 
     </ion-card> 
    </ion-row> 
    </ion-grid> 

Answer 1

行うことができる別の迅速な事はcenterにごscroll-content'sflexとjustify-contentからdisplayとalign-itemsを設定しています。