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

Question

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 height and card is not aligned in center. i would like to know how flex layout works and correct solution for this?

Thanks.

Answer 1

fxLayoutAlign for aligin vertically center and fxFill for getting 100% height.

<div class="class" fxLayout fxFill fxLayoutAlign="space-around center">
</div>