Unable to position mat-card at he centre of my window using flex layout

Question

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

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;
    align-self: center; 
}

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

Answer 1

the correct way to center one tag , into a container:

<div fxLayoutAlign="center center" fxFill> ... content </div>

1. By default the div get's a full width
2. WE use a fxLAyout align to center first horizontal and the second one is vertical, because we use a fxLayout="row" by default.
3. We need to use fxFill, this property say's , if you use row in fxLayout , the width its 100% but the height its only te content. I use fxFill, to fill all the content, it's says that we cover 100% of the height of the patern tag, but if it's your login, the patern tag its body, that starts with min-height: 100% , if you chose to use fxLayout = "column", fxFill, will will all the width, because if you use FxLayout = columns the fxFill = rows and vicebersa.