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

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

添加 class 旋转并设置文本居中对齐。

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

Answer 2

我终于找到了解决办法。添加 class 旋转并设置文本居中对齐。

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

您甚至可以使用 css 中的 flexbox 属性将加载程序居中。试试这个

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

<pre>
<ion-spinner></ion-spinner>

ion-spinner {
    position: fixed;
    z-index: 999;
    height: 5em;
    width: em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
</pre>

我就是这么做的。忘记了我得到帮助的问题。

Answer 5

像这样为我工作：

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

Answer 6

为什么要在离子微调器上方添加一个单独的 div 标签？

这是最好的方法：

<ion-spinner name="bubbles" class="page-loader" *ngIf="showPageLoader"></ion-spinner>

.page-loader{
    top:50%;
    left:50%;
    position: fixed;
    transform: translate(-50%, -50%);
}

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

How to show ionic spinner in the centre position of the screen?

ionic-framework

ionic3