Ионная 4 центральная ионная сетка в пределах содержания ионов

Question

У меня просто есть ионное содержание в этой ионной сетке, в которой h1.

<ion-content no-padding no-bounce>
    <ion-grid no-padding>
        <h1>ion-grid</h1>
    </ion-grid>
</ion-content>

У меня есть ионное содержание, равное 100vh, а ионная сетка установлена ​​на 80%;рост.Как я могу вертикально центрировать ионную решетку в пределах содержания ионов?И вертикально центрировать h1 в ионной сетке?

Я попытался настроить ионное содержимое для отображения flex (что, я уверен, это уже есть), а также центр выравнивания контента.То же самое с ионной сеткой.

Вот мой CSS:

ion-content {
    display: flex;
    height: 100vh;
    width: 100vw;
    align-content: center;

    ion-grid {
        display: flex;
        height: 80%;
        width: 100%;
        background-color: blue;
        align-content: center;
    }
}

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

Answer 1

С помощью нижеприведенных 3 строк мы можем добавить центрированный текст.

    <ion-content padding>   
<ion-grid style="height: 100%">
   <ion-row justify-content-center align-items-center style="height: 100%">
        <h1>ion-grid</h1> 
  </ion-row> 
</ion-grid>
 </ion-content>

вот ссылка на образец.

https://stackblitz.com/edit/ionic-sv2c8k

Answer 2

Я лично использую этот CSS-код для центрирования всего, помещаю его в файл app.scss и называю его каждый раз, когда вы хотите центрировать компонент вертикально внутри иона:

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

Ваше решение здесь:

<ion-content no-padding no-bounce>
    <ion-grid no-padding>
      <ion-row>
        <ion-col class="flex">
          <h1>ion-grid</h1>
        </ion-col>
      </ion-row>
    </ion-grid>
</ion-content>

Answer 3

Where is your row and column tags.  Like this!

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

  <ion-row>
    <ion-col size="6">
      ion-col [size="6"]
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
    <ion-col>
      ion-col
    </ion-col>
  </ion-row>
</ion-grid>