Center align content in Angular material is not working

Question

I'm using Angular 8 and Angular Material for layout.

I have a card with progress spinner

<mat-card>
  <mat-card-content class="text-center">
    <mat-progress-spinner class="text-center"
      [color]="color"
      [mode]="mode">
    </mat-progress-spinner>
  </mat-card-content>
</mat-card>

It is aligned on the left. I want to align center.

I tried adding text-center with CSS

.text-center {
  text-align: center;
}

But this does not work. Isn't there any predefined class for aligning content in the Angular Material?

I found one on Google search: https://material.angularjs.org/latest/layout/alignment, But this is form Angularjs version.

Answer 1

You can do it whit flex, adding this css in your component:

mat-card-content {
    justify-content: center;
    display: flex;
}