Angular 无法使用flex布局定位角材料垫卡

我刚接触Flex布局，刚开始学习如何在Flex布局中使用角度材质

我使用angular材质在angular 2中实现了一个简单的登录表单。我想使用具有角度材质的flex布局

我使用了mat卡，其中我对齐了表单元素。但我想把垫子卡放在屏幕的中央。它水平居中，而不是垂直居中

这是我的密码

myform.component.html 这是我的输出窗口

---

有谁能告诉我如何将我的mat卡水平和垂直放置在屏幕中央。

我为你的问题创建了stackblitz

在我添加的css中

mat-card{
    width: 350px;
    height: 400px;
    display: flex;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

.form-row{
    display: flex;
}

.form-row input{
    flex: 1;
}   

---

您可以通过使用下面的代码更新前两行html来将mat卡与中心对齐

 <div fxlayout="row" style="background: white;height: 100vh;">

   <mat-card fxFlex fxLayoutAlign="center center" style="max-width: 350px; max-height: 200px;">

其顶部对齐，但不居中。您可以看到我编辑了答案，并放置了另一个stackblitz。我试图解决同样的问题，但无法使用flex布局进行垂直居中-最后我发现：这对我来说很好。

mat-card{
    width: 350px;
    height: 400px;
    display: flex;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

.form-row{
    display: flex;
}

.form-row input{
    flex: 1;
}   

 <div fxlayout="row" style="background: white;height: 100vh;">

   <mat-card fxFlex fxLayoutAlign="center center" style="max-width: 350px; max-height: 200px;">