Question

我用这个link来使我的Mat卡居中。这是HTML代码：

  <body>
     <div class="main-div">
       <mat-card >

这是css文件：

.main-div{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  }

窗体仍然跨越页面的宽度。我什至还添加了“最大宽度：400像素；”显示不会改变。

Answer 1

在谷歌搜索后，它起作用了：

<div fxLayout="column" fxLayoutAlign="center center">
<mat-card fxFlex> 
  card
</mat-card>
 </div>

和

mat-card{

  display: block;
 margin-left:auto;
  margin-right:auto;  

}

:host {
  display: block;
  height: 100%;
}