How to center a login card in Angular Material

I am having difficulty in centering my login card. This is what it looks like now:

This is my code:

.html

<!-- ============================================================== -->
<!-- Simple four boxes Row -->
<!-- ============================================================== -->
<div fxLayout="row" fxLayoutWrap="wrap">
    <!-- column -->    
    <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
        <mat-card>
            <mat-card-content>
                <!-- Row -->
                <div fxLayout="row" fxLayoutWrap="wrap">
                    <!-- column -->
                    <div fxFlex.gt-sm="50" fxFlex.gt-xs="50" >
                        <div class="contains">
                            <div class="login-box">
                                    <mat-card class="mat-elevation-z2" style="background-color: #26C6DA">
                                            <mat-card-header style="background-color: teal; color: whitesmoke;">Login</mat-card-header>
                                            <mat-card-content>
                                              <form class="form my-2 my-lg-0" #loginForm="ngForm" (ngSubmit)="login()">
                                                <mat-form-field>
                                                  <input type="text" class="text-white" placeholder="Username" name="username" [(ngModel)]="model.username" required matInput/>
                                                </mat-form-field>
                                                <mat-form-field>
                                                  <input type="password" placeholder="Password" name="password" [(ngModel)]="model.password" required matInput/>
                                                </mat-form-field>
                                                <button
                                                  type="submit"
                                                  mat-raised-button
                                                  class="btn btn-primary btn-sm btn-block"
                                                  [disabled]="!loginForm.valid"
                                                >
                                                  Submit
                                                </button>
                                              </form>
                                            </mat-card-content>
                                          </mat-card>
                                </div>
                            
                        </div>
                        <br/><br/>
                    </div>
                </div>      
            </mat-card-content>
        </mat-card>
    </div>
    <!-- column -->    
</div>

and this is in the CSS

.contains {
    text-align: center;
}

.login-box, .register-box {
    display: inline-block;
    margin: auto;
    width: 75%;
}.login-page, .register-page {
    background: #d2d6de;
}

I am trying to learn CSS, flexbox and Bootstrap. I have tried using styles from research but I still couldn't get it to work. What can I try next?

Apply this css to the login card itself, i.e. to class="login-box".

.login-box{
    margin: auto;
    margin-top: 15%;
}

As explanation, margin auto sets automatic suiting margin to horizontal center your div and its content of course so your mat-card.

I like to use margin-top: 15% for the space to the top of the site, which usually looks quite good. It will look like the following: