The issue I'm running into is I can't get a 2 x 2 grid on the center of my screen. This is the code I have so far on the HTML. Just to clarify the project is being built for a native mobile application.
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
Testing
</ion-title>
</ion-toolbar>
</ion-header>
<app-navbar></app-navbar>
<ion-content color="primary">
<ion-grid class="ion-justify-content-center">
<ion-row class="ion-align-items-center">
<ion-col>
<div>
1 of 4
</div>
</ion-col>
<ion-col>
<div>
2 of 4
</div>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center">
<ion-col>
<div>
3 of 4
</div>
</ion-col>
<ion-col>
<div>
4 of 4
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
It is stuck to the left side and when I remove the ion-content tag it goes centered up top but not in the middle of the screen where I'd like it to be. Any help would be appreciated.
add page.scss
ion-grid{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
}