Ionic 3 grid doesn't center vertically rows items

Question

Ionic component Grid not sure why it doesn't center them. i have tried their official documentation for vertical alignment still doesn't work. please let me know if any other detail is needed.

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

Result what i need

Answer 1

I have done it using flex as shown below.

Working 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;
        }
     }

UI