Angular Flex Layout refuses to center container horizontally, applied directives to div, router outlet, everything, yet it still wont center

Question

Recording of the elements insepcted: https://streamable.com/nmhaa

The container within 'interactive-models' will simple not center inside his parent container.

in App Component Html:

<router-outlet fxLayout="column" fxFlexAlign="center" fxLayoutAlign="center center">

Inside Interactive-models commponent.html:

<div fxLayout="row" fxLayoutAlign="center center" 

fxHide.lt-md="true" class="container theStupidList" fxFlex="90%">

The Material grid list:

<mat-grid-list class="item" fxFlex="90" fxFlexAlign="center"  
cols="3" rowHeight="600" gutterSize="15px">

In my CSS:

.theStupidList {
justify-content: center!important;
justify-self:center !important;
justify-items: center!important; }

Answer 1

I may be wrong here, but the component that you’re trying to display inside the router isn’t actually outlet’s child (it’s would be a sibling) if you look in the DOM. Therefore you need to flex the parent that holds the outlet. Just wrap the outlet in a div and center the the children.

<div fxLayout=“row” fxLayoutAlign=“center center”>

If you would like you can also set the fxFlexFill on that parent div to make sure it take the whole available space