Ионное 2 вертикальное выравнивание с использованием ионной сетки

У меня есть 2 кнопки на экране в Ionic 2, и я хочу выровнять их вместе (один поверх другого, но вместе) в середине экрана (горизонтальное и вертикальное выравнивание).

Я хочу использовать ионную сетку, без прокладки, поля, поплавки или проценты.

Итак, у меня есть этот

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

С <ion-col text-center> я могу выровнять их по центру по горизонтали, но для вертикального выравнивания я не вижу ничего, к чему могу применить, поэтому я пробовал это:

ion-grid {
  justify-content: center;
}

Но ничего не произошло. Я проверил, и это применяется к странице, но по какой-то причине она не работает. Любые идеи?

Ответы

Ответ 1

Используйте это:

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

Ответ 2

Вы можете использовать код ниже в столбце (например, flex-col) внутри ионной сетки, чтобы выровнять по центру по вертикали и по горизонтали:

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

Ответ 3

Вы можете использовать немного больше Ionic, если вы это сделаете, а затем просто примените высоту в файлах Sass. Вам также не нужен ion-col. Кроме того, классы изменились и просто .grid и .row

Разметка

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