Unable to position angular material mat-card using flex layout

I am new to Flex Layout and just started studying how to use angular material with flex layout.

I have implemented a simple login form in angular 2 using angular material. I want to use flex layout with angular material.

I used mat-card in which i have aligned my form elements. But i want to position mat-card at the centre of my screen.Its getting centred horizontally but not vertically

This is my code

myform.component.html


<div fxlayout="column" style="background: white;">

<mat-card fxFlex>
<form (ngSubmit)="onSubmit(user.username,user.password)" #myForm="ngForm">

<p style="font-size: 30x;">Space Study</p>
<p style="font-size: 14px;">Sign In</p>
<mat-input-container class="form-row">
<span matTooltip="Username">
<input matInput placeholder=" " id="username" [(ngModel)]="user.username" name="username">
</span>
<span matPrefix><mat-icon>person&nbsp;&nbsp;</mat-icon></span>
</mat-input-container>

<mat-input-container class="form-row">
<span matTooltip="Password">
<input matInput placeholder=" " id="password" [(ngModel)]="user.password" name="gpassword" [type]="hide ? 'password' : 'text'">
</span>
<span matPrefix><mat-icon>remove_red_eye&nbsp;&nbsp;</mat-icon></span>
</mat-input-container>

<button mat-raised-button color="primary" type="submit" mat-raised-button>Login</button>

<mat-progress-bar mode="indeterminate" *ngIf="showprogressbar"></mat-progress-bar>
</form>

</mat-card>

</div>

myform.component.css


mat-card{
width: 350px;
height: 400px;
margin:auto;
vertical-align:middle;
}

.form-row{
display: flex;
}

.form-row input{
flex: 1;
}

Here is my output window




Can anybody please tell me how can i place my mat-card in the centre of my screen both horizontally and vertically.?

Continue reading...