Vertical and horizontal center

Ionic Framework ionic-v3
1

Hello! I can’t figure out how to put a message in the middle of the screen using the new grid system.

With the snippet below, my text is on the top and is horizontal centered but not vertically centered, i tried to play with the columns but can’t fix it.

    <ion-grid>
      <ion-row justify-content-center align-items-center>
        Hello world!
      </ion-row>
    </ion-grid>

Maybe @brandyshea can save me from this ? :blush:

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.

3

Amazing, it works, thank you Brandy!

4

Hi Brandy, for some reason the screen seems to be able to be scrolled a very bit with this solution. Is there a way to avoid this so the screen is fixed while the text is in the middle? In my case I’m using a spinner.

5

How to make a new line/paragraph after ‘Hello world!’