angular - Ionic 3 网格无法将行项目垂直居中

Question

ionic 组件网格不确定为什么它不将它们居中。我已经尝试过他们的官方文档 vertical alignment还是不行。 如果需要任何其他详细信息，请告诉我。

<ion-content>

   <ion-row justify-content-center align-items-center>
      <ion-item>
        <ion-label stacked color="primary">Username</ion-label>
        <ion-input [(ngModel)]="login.username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off"
          required>
        </ion-input>
      </ion-item>
    </ion-row>
    <ion-row justify-content-center align-items-center>

      <ion-item>
        <ion-label stacked color="primary">Password</ion-label>
        <ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" required>
        </ion-input>
      </ion-item>
    </ion-row>

  </ion-grid>

</ion-content>

结果是我需要的

Answer 1

我使用 flex 完成了此操作，如下所示。

工作中stackblitz

html

<ion-content padding class="sign-in">
    <ion-grid>
        <ion-row class="row1">
        </ion-row>
        <ion-row class="row2">
            <ion-col col-12>
                <ion-item>
                    <ion-label stacked color="primary">Username</ion-label>
                    <ion-input [(ngModel)]="login.username" name="username" type="text">
                    </ion-input>
                </ion-item>
                <ion-item>
                    <ion-label stacked color="primary">Password</ion-label>
                    <ion-input [(ngModel)]="login.password" name="password" type="password">
                    </ion-input>
                </ion-item>
            </ion-col>
        </ion-row>
    </ion-grid>

</ion-content>

.scss

  .sign-in {
        ion-grid {
            min-height: 100%;
        }
        .row1 {
            flex: 1;
        }
        .row2 {
            flex: 1;
        }
     }

用户界面