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;
}