How to center align a button in mat-grid-tile-footer

Question

I have mat-grid-list where I am listing items in the view.

issue 1: Each item has a mat-grid-tile-footer section where I display a angular material button. The button is currently aligned left side in the footer section and I want to align the button in the centre of mat-grid-tile-footer using below code ( flex row centre is also not working inside footer) but it's not working. Any ideas ?

issue 2: On applying [style.background]="'white'" to the footer the mat-raised-button text also gets invisible. Seems like it is overriding the button behaviour too. Any ideas ?

<mat-grid-tile-footer [style.background]="'white'">
   <div fxLayout="row" fxLayoutAlign="center center">
        <button mat-raised-button>Try me</button>
  </div>
</mat-grid-tile-footer>

TRY 1 On using margin: auto I see the changed styles is not picked up and below is the used styles

.mat-grid-tile .mat-grid-tile-header>*, .mat-grid-tile .mat-grid-tile-footer>* {
        margin: 0;
        padding: 0;
        font-weight: normal;
        font-size: inherit;
    }

Answer 1

Issue 1: adding CSS .mat-grid-tile-footer div{ margin: auto; } resolves it

Issue 2: unable to observe the behavior of the text getting invisible

working stackblitz here

update: in light of comment below... remove margin: 0 from the class in your question... so that the CSS is only:

.mat-grid-tile-footer div{ margin: auto; }
.mat-grid-tile .mat-grid-tile-header>*, .mat-grid-tile .mat-grid-tile-footer>* {
        padding: 0;
        font-weight: normal;
        font-size: inherit;
    }