vertically centered row in ionic 4 - ionic-framework

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>

Answer 1

I did it using this styles
ion-grid{
height: 100%;
}
ion-row{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}

Answer 2

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>

Answer 3

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