ion-card如何垂直居中对齐？[IONIC]

Question

我正在开发一个登录表单，所以在我的<ion-content padding >中，我有一个<ion-card>（用作登录表单的容器），我想让它垂直居中。我尝试了不同的方式，包括使用css flexbox和其他css技巧，但是都没有成功！这个card始终停留在页面顶部。你能帮我吗？

<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。我做过的所有测试都是无用的（卡片没有移动一毫米），除非在卡片上使用margin-top，但这不是正确的方法，我希望有一个响应式的解决方案！

谢谢您提前！

解决方案

我使用了这段代码，现在我的卡片已经居中了！

 <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>

- JEricaM

---

谢谢，你的解决方案很有用！ - Zaki Mohammed

Answer 1

另一个可以做的快速事情是将您的scroll-content的display设置为flex，并将justify-content和align-items设置为center。

- Anjil Dhamala