使用flex布局将div居中到页面-角材料2

Question

我想在页面中央显示卡片。当我将类进度向导放在单独的div中时，如下所示。

<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;
}

这样，第二个div不继承父div的高度，并且card不在中心对齐。我想知道弹性版面如何运作，并为此解决正确的解决方案？

谢谢。

Answer 1

fxLayoutAlign用于对齐aligin垂直居中，而fxFill用于获取100％高度。

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