How to center vertically with Angular Flex Layout?

Question

I've created a simple login component and I'd like to vertically center, but I'm not sure how to achieve this using the Angular Flex Layout library.

app.component.html

<router-outlet></router-outlet>

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

styles.scss

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

screenshot:

Answer 1

Vertically centering elements with flexbox has no effect if the container element is the same height as its contents. Making the top level <div> in your example take up all the available vertical space with height: 100% (or some other Angular Flex Layout specific solution if available - maybe fxFlexFill) should center its contents right where you want them.