angular - 如何使用 Angular Flex Layout 垂直居中？

Question

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

app.component.html

<router-outlet></router-outlet>

登录.component.html

<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>

样式.scss

body{
    margin: 0;
    background-color: #eff2f5;
}

截图:

Answer 1

如果容器元素与其内容的高度相同，则使用 flexbox 垂直居中元素无效。制作顶级<div>在您的示例中，使用 height: 100% 占用所有可用的垂直空间(或其他一些 Angular Flex Layout 特定解决方案，如果可用 - 也许是 fxFlexFill )应该将其内容居中放置在您想要的位置。