Angular Flex Layout で垂直方向に中央揃えするにはどうすればいいですか? 質問する

シンプルなログイン コンポーネントを作成し、垂直方向に中央揃えにしたいのですが、Angular Flex Layout ライブラリを使用してこれを実現する方法がわかりません。

アプリコンポーネント

<router-outlet></router-outlet>

ログインコンポーネント.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>

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