Center grid in ion-content

Ionic Framework ionic-v3
7

Centering any element can be a ball-ache, especially vertically. Try having a parent ion-row with height set to 100% with a) ion-cols all the way down or b) nested ion-cols and ion-rows (only one grid). Style both ion-grid and the parent ion-row.

.html

<ion-grid class="my-grid">
    <ion-row class="parent-row">
        ...
        ...
    </ion-row>
  </ion-grid>

.css

.my-grid {
    height: 100% !important;
 }
.parent-row {
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
 }

!important flags might not be necessary, but it often helps to start with them and notice what happens when they’re removed.

2 Likes