Angular Flex Layout 拒绝将容器水平居中，将指令应用到 div，路由器出口，一切，但它仍然不会居中

Question

'interactive-models' 中的容器将不会在其父容器内居中。

在应用程序组件中 Html:

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

内部交互模型commponent.html：

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

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

Material 网格列表：

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

在我的 CSS:

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

Answer 1

我在这里可能是错的，但是如果您查看 DOM.因此，您需要弯曲固定插座的 parent。只需将插座包裹在 div 中并将 children 居中。

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

如果您愿意，还可以在 parent div 上设置 fxFlexFill 以确保它占用整个可用空间 space

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