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

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

添加类自旋并设置文本对齐中心。

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

您甚至可以使用CSS中的void MyMessageBox::resizeEvent(QResizeEvent *Event) { QMessageBox::resizeEvent(Event); this->setFixedWidth(myFixedWidth); this->setFixedHeight(myFixedHeight); } 属性来使加载程序居中。试试这个

flexbox

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

为什么要在 ion-spinner 上方添加一个单独的 div 标签？

这是最好的方法：

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

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