css - Angular Flex Layout 拒绝将容器水平居中，将指令应用于 div、路由器导出等所有内容，但它仍然不会居中

Question

被检查元素的记录:https://streamable.com/nmhaa

“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 中查看，您试图在路由器内显示的组件实际上并不是 outlet 的子组件(它应该是同级组件)。因此，您需要 flex 持有 socket 的 parent 。只需将 socket 包裹在一个 div 中并将 child 居中。

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

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