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

Question

I have a spinner in my ionic project. I want to put the spinner in the centre position of the screen. But it always shows up in the left top corner as:

Html file is:

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

My scss file is:

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

Can you help?

Answer 1

I find the solution finally. Add a class spin and set text align center.

<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

Add a class spin and set text align center.

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