Html 离子旋转器未显示在离子化身的中心

在我的Ionic3项目中，我试图在图像的中心显示一个微调器。 以下是我的HTML和SCSS文件

HTML:

问题是，

ionspinner

没有将

ionavatar

视为父母。相反，它将

离子项

作为父项并显示在其中心。 请帮忙

这样修理

获取文本和图像的父对象，并将

位置：relative

置于其上

然后使用微调器并添加此css

.spinner{
位置：绝对位置；
左：50%；
转化：translateX（-50%）；

将绝对位置“剪辑”到第一个相对位置的元素，并将其自身放置在父元素左侧50%的位置，然后返回50%的位置，这将使其完全居中

阅读定位元素。你应该非常了解它。它真的很重要

希望这有帮助

<ion-item no-lines no-padding>
  <ion-avatar item-start no-margin>
      <img [src]="imgURL" (load)="loaded = true"/>
      <ion-spinner class="imgSpinner" *ngIf="loaded"></ion-spinner>
  </ion-avatar>
<ion-label no-margin>{{name}}</ion-label>
</ion-item>

  .imgSpinner{
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      margin: auto;
      z-index: 9;
  }