Overlay text centered in mat-progress-spinner on Angular, Material and Flex-Layout

4
votes

I use material and flex-layout in my angular project. I have a mat-progress-spinner that I would like to center text inside of it. I got it somewhat there using position absolute but my problem is that this does not remain centered on different sized screens. Here is my code

child.component.html

<div>
  <mat-progress-spinner mode="indeterminate" [strokeWidth]="2" [diameter]="192"></mat-progress-spinner>
  <div class="message">{{ message }}</div>
</div>

child.component.scss

.mat-progress-spinner {
  display: inline-block;
  vertical-align: middle;
}

.message {
  position: absolute;
  text-align: center;
  top: 49%;
  left: 44%;
}

This is a child component that is centered in the parent using the following

parent.component.html

<div fxLayout="column" fxLayoutAlign="center center" fxFill>
  <app-child></app-child>
</div>

Thanks

1
angularangular-materialangular-flex-layout

1 Answers

4
votes

You can use the following and it should do the trick:

.message {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hope this helps.