Angular Flex Layout拒绝将容器水平居中，将指令应用于div，路由器出口等所有内容，但仍无法居中

Question

已记录的元素记录：https://streamable.com/nmhaa

“交互模型”中的容器将不会简单地不在其父容器内部居中。

在应用程序组件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％”>

材料网格列表：

<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，则您试图显示在路由器内部的组件实际上并不是插座的子组件（这是同级的）。因此，您需要弯曲容纳插座的父项。只需将出口包裹在div中，然后将孩子放在中间即可。

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

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