vertically centered row in ionic 4

Question

I'm using Ionic version 4 and I want my login form in the application to be vertically centered.

I've tried many solutions present in stack overflow but looks like all works for Ionic version 3 and also tried some of the CSS tricks like margin 0 auto; and

display:flex;
justify-content:center !important;
align-content:center !important;

But didn't work for me.

This is how my forms looks like, I'm using bootstrap additionally and have no custom css classes added into the template.

Here's my template code.

<ion-content color="light">
  <ion-grid>
    <ion-row class="ion-justify-content-center">
      <ion-col size-xs="9" size-md="9">
        <form>
            <div class="form-group">
              <input
                type="text"
                class="form-control"
                placeholder="Enter AccountID"
                autocomplete="off"
              />
            </div>
            <div class="form-group">
              <input
                type="email"
                class="form-control"
                placeholder="Enter Email"
                autocomplete="off"
              />
            </div>
            <div class="form-group">
              <input
                type="password"
                class="form-control"
                placeholder="Enter Password"
                autocomplete="off"
              />
            </div>
            <button type="submit" class="btn btn-primary btn-block">Submit</button>
        </form>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Solution 1

I did it using this styles

ion-grid{
    height: 100%;
}
ion-row{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

Solution 2

Try this code:

.vcenter{
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Solution 3

My code works in Ionic v4

ion-grid{
    height: 100%;
}
ion-row{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

<ion-content>

  <ion-grid class="ion-text-center">
    <ion-row>
      <ion-col size="12">
       blaaaaaaaaaa
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>