angular-flex-layout

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