이온 카드의 중심 정렬 [

Question

로그인 양식을 개발 중입니다. 따라서 <ion-content padding > 안에는 <ion-card> (로그인 양식의 컨테이너처럼 사용됨)이있어서 세로로 가운데에 넣고 싶습니다. 나는 CSS를 flexbox 및 다른 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> 

나는이 페이지에하는 SCS의 행동의 어떤 종류가 없습니다. 내가 한 모든 테스트는 쓸모가 없었습니다 (카드가 1 밀리미터로 움직이지 않았습니다). 카드 위의 여백 만 사용하는 것을 제외하고는 올바른 방법이 아니 었습니다. 반응이 좋았습니다. 미리 감사드립니다.

이 코드를 사용하여 내 카드가 지금은 중앙에있어

해결! 당신의 scroll-content'sdisplayflex 및 justify-content 및 align-items에 center로 설정하는 것입니다 수행 할 수 있습니다

<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

또 다른 빠른 것.