Как центрировать сетку по вертикали и горизонтали на Ioni c 5?

Question

Я не знаю, как центрировать 4 значка в центре макета, это было бы как 2 значка вверх и два вниз, я использую ubuntu и не могу нарисовать пример, извините. Проблема, с которой я столкнулся с CSS, и понятия не имею. Спасибо

My CSS at the moment:

.vertical-center {
    .fixed-content,
    .scroll-content {
        display: flex;
        align-items: center;

        ion-grid {
            max-width: 300px; 
            width:100%; 
            margin: auto; 
            text-align: center;
        }
    }
}

My HTML code:

Thats my goal:

введите описание изображения здесь

Answer 1

Я обычно набираю ion-grid или ion-row по центру:

display: flex;
align-items: center;
justify-content: center;

Answer 2

Наконец-то решено:

Я не думаю, что это лучший результат, но я вижу гораздо лучше по центру экрана, поэтому на данный момент это мой единственный вариант.

//. S CSS

.square {
    width: 40%;
    margin: 1%;
}

.wrapper {
    display: grid;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-items: center;
  }

// HTML

  <div class="wrapper">
    <ion-grid class="square">
      <ion-row>
        <ion-col>
          <img class="animate__animated animate__fadeInDown animate__slow" src="../../assets/icon1.png" style="width:60px;"/>
        </ion-col>
        <ion-col>
          <img class="animate__animated animate__fadeInRight animate__slow" src="../../assets/icon2.png" style="width:60px;"/>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <img class="animate__animated animate__fadeInUp animate__slow" src="../../assets/icon3.png" style="width:60px"/>
        </ion-col>
        <ion-col>
          <img class="animate__animated animate__fadeInLeft animate__slow" src="../../assets/icon4.png" style="width:60px;"/>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>