Как показать ионный счетчик в центре экрана?

Question

У меня есть блесна в моем ионном проекте.Я хочу поставить спиннер в центральное положение экрана.Но он всегда отображается в левом верхнем углу как:

HTML-файл:

<div *ngIf="spinner == 'true'">
   <ion-spinner name="bubbles"></ion-spinner>
</div>

Мой файл scss:

page-login {
    ion-spinner {
    width: 28px;
    height: 28px;
    stroke: #444;
    fill: #222;
  }
}

Вы можете помочь?

Answer 1

Я наконец нашел решение.Добавьте спин класса и установите центр выравнивания текста.

<div class="spin" *ngIf="spinner == 'true'">
    <ion-spinner name="bubbles"></ion-spinner>
</div>

.spin{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }
 ion-spinner {
    width: 28px;
    height: 28px;
    stroke: #444;
    fill: #222;
 }

Answer 2

Вы даже можете центрировать загрузчик, используя свойство flexbox в css.Попробуйте это

<div class="spin" *ngIf="spinner == 'true'">
   <ion-spinner name="bubbles"></ion-spinner>
</div>

.spin{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

Answer 3

Добавьте спин класса и установите центр выравнивания текста.

 <div class="spin" *ngIf="spinner == 'true'">
        <ion-spinner name="bubbles"></ion-spinner>
 </div>

.spin{
    text-align: center;
  }
  ion-spinner {
    width: 28px;
    height: 28px;
    stroke: #444;
    fill: #222;
  }