Angular 如何使用角度弯曲布局垂直居中？

我已经创建了一个简单的登录组件，我想垂直居中，但我不知道如何使用Angular Flex布局库实现这一点

app.component.html

<router-outlet></router-outlet>

<div fxLayout fxLayoutAlign="center center">
    <mat-card fxFlex="30%">
        <mat-card-title>Login</mat-card-title>

        <mat-card-content fxLayout="column">
            <mat-form-field>
                <input matInput placeholder="Username">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Password">
            </mat-form-field>
        </mat-card-content>

        <button mat-raised-button color="accent">Login</button>
    </mat-card>
</div>

截图：

---

如果容器元素与其内容物的高度相同，则使用flexbox垂直居中的元素无效。在您的示例中，使顶层

占据所有可用的垂直空间，高度为

100%

（或其他一些特定于角度灵活布局的解决方案，如果可用-可能是

fxFlexFill

），应该将其内容居中于您想要的位置。

您必须指定fxLayout的高度（已编辑）

---

如果父元素具有已知高度，则只需

fxLayoutAlign=“center-center”

：

玛雅比组合多用途主题
lorem ipsum dolor sit amt，为精英们提供服务，并为其提供服务
泰波拉在实验室里

你好
.导言部分{
高度：500px；
}

我添加了style=“min height:100vh”在我的例子中，我使用的是父div

边距顶部：-100px

现在添加到child div

padding top:100px问题已解决。这可能对某些人有帮助。我试过这个。代码对我来说是有意义的，但它没有按预期工作。高度虽然设置为100%，但根据子元素的不同，它只是需要所需的高度，在我的例子中，它只有161px，所以它只是水平居中，而不是垂直居中。因此，我将高度设置为
850px
。但是，这只是一种解决方法，不应依赖于静态数字，因为它不会集中在每个设备/屏幕宽度上。
body{
    margin: 0;
    background-color: #eff2f5;
}

<div fxLayout="row" fxLayoutAlign="center center" class="row-height">
    <mat-card fxFlex="30%">
        <mat-card-title>Login</mat-card-title>

        <mat-card-content fxLayout="column">
            <mat-form-field>
                <input matInput placeholder="Username">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Password">
            </mat-form-field>
        </mat-card-content>

        <button mat-raised-button color="accent">Login</button>
    </mat-card>
</div>

.row-height {
    height: 100%
}

<section class="intro-section">
  <div
   fxLayout="row"
   fxLayout.xs="column" 
   fxFlexFill
   fxLayoutAlign="center center"
  >
    <div fxFlex="50">
      <h1>MAYABI PORTFOLIO MULTIPURPOSE THEME</h1>
      <p>lorem ipsum dolor sit amt, consectet adop adipisicing elit, sed do eiusmod 
teporara incididunt ugt labore.</p>
    </div>
    <div fxLayout="50">
      hello
   </div>
  </div>
</section>

.intro-section {
   height: 500px;
}