Posicionamiento de elementos de Angular/Angular Material.

Estoy teniendo dificultades para alinear elementos como mat-grid-list en Angular usando los métodos que normalmente uso. A continuación, verá que tengo una simple grid-list dentro de una etiqueta div dentro de un contenedor de ancho limitado. Cuando intento alinear el contenedor al centro de la página, llevando la grid-list junto con él usando un simple “align-items/text”, no funciona, y si uso Display:Flex;, el mat-grid desaparece. ¿Hay alguna manera de obtener “exampleDiv” limitado al centro de la página sin hacer que la mat-grid-list desaparezca? Gracias

(P.S. Intenté agregar (fxLayout=”row” fxLayoutAlign=”space-around center”) en las etiquetas div que tampoco funcionó)

HTML

<div fxlayout="row" fxlayoutalign="space-around center" class="mainContainer">

     <mat-grid-list cols="2" rowheight="100px">
        <mat-grid-tile colspan="2">
            <mat-card class="titleCard"><h5>Editar - Cotswold Wildlife Park</h5></mat-card>
        </mat-grid-tile>
     </mat-grid-list>

     <div fxlayout="row" fxlayoutalign="space-around center" class="exampleDiv">
         <!-- items to layout horizontally -->
         <div>
             <mat-grid-list cols="1" rowheight="100px">
                  <mat-grid-tile>
                      Test
                  </mat-grid-tile>
             </mat-grid-list>
         </div>
         <mat-card class="exampleCard">...</mat-card>
         etc...
     </div>


</div>

CSS

.mainContainer {
    padding: 10px;
    text-align: center;
    align-items: center;
}

.titleCard {
    text-align: center;
    width: 300px;
}

.exampleCard {
    text-align: center;
}

.exampleDiv {
    text-align: center;
    width: 80%;
}