如何在屏幕的中心位置显示离子微调器？

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