To center a div to page using flex layout - angular material 2

[Mathan K A]

I want to make a card display in center to the page. When i put the class progress-wizard in a separate div like below.

<div class="progress-wizard" >
  <div fxLayout="row" fxLayoutAlign="center center">
    <mat-card>
      <button mat-raised-button color="primary">Primary</button>
    </mat-card>
  </div>
</div>

css:

.progress-wizard {
  height: 90vh!important;
}

In this way, second div not inheriting the parent div and card is not aligned in center. i would like to know how flex layout works and correct solution for this?

Thanks.