如何在网页上居中 mat-card答案

【问题标题】：How to center mat-card on the webpage如何在网页上居中 mat-card
【发布时间】：2019-07-25 21:58:47
【问题描述】：

我用这个link 将我的垫卡放在中心。这是 HTML 代码：

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

这是css文件：

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

表单仍然跨越页面的宽度。我什至添加了“最大宽度：400px；”显示不变。

【问题讨论】：

标签： angular

【解决方案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%;
}

【讨论】：