ionic 2 vertical alignment using ion-grid

Question

I have 2 buttons in a screen in Ionic 2, and I want to align them both together (one on top of the other, but together) in the middle of the screen (horizontal and vertical alignment).

I want to use ion-grid, no paddings, margins, floats or percentages.

So I have this

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col text-center>
        <button>button 1</button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col text-center>
        <button>button 2</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

With <ion-col text-center> I can align them to the center horizontally, but for vertical alignment I can´t see anything that I can apply to , so I tried this:

ion-grid {
  justify-content: center;
}

But nothing happened. I checked and this is being applied to the page, but for some reason it doesn´t work. Any ideas?

Answer 1

Use this:

ion-grid {
    height: 100%;
    justify-content: center;
}

Answer 2

You can use the code below in a column (e.g.: flex-col) inside ion-grid to align centered vertically and horizontally:

.flex-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 3

You can use a bit more of Ionic if you do it this way, and then just apply the height in your Sass files. You also don't need the ion-col. Also, the classes have changed and are just .grid and .row

Markup

  <ion-content>

    <ion-grid>
      <ion-row justify-content-center align-items-center>

        Horizontally and Vertically Centered

      </ion-row>
    </ion-grid>

  </ion-content>

Sass

.grid, .row {
  // Force grid to fill height of content as this is not set by default
  height: 100%;
}