Vertical and horizontal center

Ionic Framework ionic-v3
2

Do you mean vertically centered in the ion-content? The grid by default won’t take up the full height of the content. You can add height: 100% to achieve this:

<ion-grid style="height: 100%">
  <ion-row justify-content-center align-items-center style="height: 100%">
    Hello world!
  </ion-row>
</ion-grid>

Note: I wrote the styles inline but you can add them using a class/attribute or directly to the .grid and .row classes.

23 Likes