时间戳

首页 > 解决方案 > 如何在网页上居中 mat-card

angular - 如何在网页上居中 mat-card

问题描述

我使用此链接将我的垫卡居中。这是HTML代码：

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

这是css文件：

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

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

标签： angular

解决方案

谷歌搜索后，这工作：

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

推荐阅读