Html 为什么div比它的内容更广泛？

我正在尝试创建一个20-60-20 flex-fill布局的页面，但是中间的div应该占页面的60%，它比它的内容宽，所以它使它的内容看起来像是偏离了中心

home.component.html：

<div fxLayout="row wrap"  fxLayoutGap="20px grid">
  <div *ngFor="let data of DUMMY_DATA">
    <mat-card class="example-card" >
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content class="description-max-height">
        <p>
          {{data.description.length > 100 ? data.description.substring(0, 100) + '...' : data.description}}
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

<mat-toolbar color="primary" style="margin-bottom: 20px">
  <mat-toolbar-row>
    <span>Some title</span>
    <span class="toolbar-spacer"></span>
    <button mat-button color="accent" (click)="openLoginDialog()">Log In</button>
    <button mat-button color="accent" (click)="openSignupDialog()">Register</button>
  </mat-toolbar-row>
</mat-toolbar>
<div fxLayout="row">
  <div fxFlex="20"></div>
  <router-outlet fxFlex="60"></router-outlet>
  <div fxFlex="20"></div>
</div>

app.component.html：

<div fxLayout="row wrap"  fxLayoutGap="20px grid">
  <div *ngFor="let data of DUMMY_DATA">
    <mat-card class="example-card" >
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content class="description-max-height">
        <p>
          {{data.description.length > 100 ? data.description.substring(0, 100) + '...' : data.description}}
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

<mat-toolbar color="primary" style="margin-bottom: 20px">
  <mat-toolbar-row>
    <span>Some title</span>
    <span class="toolbar-spacer"></span>
    <button mat-button color="accent" (click)="openLoginDialog()">Log In</button>
    <button mat-button color="accent" (click)="openSignupDialog()">Register</button>
  </mat-toolbar-row>
</mat-toolbar>
<div fxLayout="row">
  <div fxFlex="20"></div>
  <router-outlet fxFlex="60"></router-outlet>
  <div fxFlex="20"></div>
</div>

如何实现这一点，以便在页面中心显示home.component.html，而不使其宽度超过其内容

---

您可以找到Stackblitz示例路由器出口

不是容器。路由到
路由器出口的所有内容都呈现为同级节点，而不是出口的子节点。因此，您应该使用60%宽度的
div来包装
路由器插座




将
fxLayoutAlign=“center”
添加到
home组件中的
fxLayout
div（顶级div）中。html
应对齐容器中央的项目/卡

<div fxLayout="row wrap"  fxLayoutGap="20px grid" fxLayoutAlign="center">


你能创建stackblitz示例吗？@pc\u coder我添加了一个stackblitz示例我没有看到任何问题，这是60%你的下一张图像不适合，所以往下看，然后你看到这个empyt区域了吗？你想要什么结果？