Как центрировать мат-карту в угловых материалах?

Пожалуйста, попробуйте ниже методы css.

1. первый способ.

.example-card{
    display:inline-block;
}

Затем создайте один div обложки для "mat-card". Дайте имя класса для div обложки, например "mat-card-cvr".

.mat-card-cvr{
   width: 100%;
   text-align:center;
}

2. второй способ.

.example-card{
    margin: 0 auto;
    width: 40%;
}

3. Третий способ.

.example-card{
    margin: 0 auto;
    width: 40%;
    display: inline-block;
    vertical-align: middle;
}

Затем создайте один div обложки для "mat-card". Дайте имя класса для div обложки, например "mat-card-cvr".

.mat-card-cvr{
    width: 100%;
    height: 500px;
    line-height: 500px;
    text-align: center;
}

4. Четвертый способ.

.mat-card-cvr{
    top:50%;
    width:100%;
    text-align:center;
    position:fixed;
}
    
.example-card{
    margin:0 auto;
    display:inline-block;
}

Исправлено с помощью очень простого Flex

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

и оборачиваем все классом

<!-- Classes main-div and example-card are catagorized in .css file -->
<div class = "main-div">

<mat-card class = "example-card">
  <mat-card-header>
    <div class = "login-box-header">
        <!-- Src image is temporary hosted in image.ibb-->
        <img src = "https://image.ibb.co/hDqa3p/codershood.png">
    </div>
  </mat-card-header>
  <mat-card-content>
    <form class = "example-form">
      <table class = "example-full-width" cellspacing = "0">
        <tr>
          <td>
            <mat-form-field class = "example-full-width">
            <input matInput placeholder = "Username" [(ngModel)] = "username" name = "username" required>
            </mat-form-field>
          </td>
        </tr>
        <tr>
        <td><mat-form-field class = "example-full-width">
          <input matInput placeholder = "Password" [(ngModel)] = "password"type = "password" name = "password" required>
        </mat-form-field></td>
      </tr></table>
    </form>
    <mat-spinner [style.display] = "showSpinner ? 'block' : 'none'"></mat-spinner>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button (click) = "login()" color = "primary">Login</button>
  </mat-card-actions>
</mat-card>

Это произвело на меня чудо:

.btn-center{
   margin: 0 auto;
   display: flex;
}

Материал предоставлен mat-grid-list для расположения строк и столбцов. используйте это так:

<mat-grid-list cols = "1" rows = "1" rowHeight = "2:1">
    <mat-grid-tile>
        <mat-card>
        Your form here
        </mat-card>
    </mat-grid-tile>
</mat-grid-list>

См. Документы для получения дополнительной информации https://material.angular.io/components/grid-list/overview

Я попробовал ответ OP, но мне тоже нужно контролировать ширину, поэтому пришлось использовать div внутри div, а затем мат-карту

.centering-div{
  display: flex;
  justify-content: center;
}

.inner-container {
  width: 80%;
  max-width: 100%;
  overflow: auto;
}
.my-card {
  max-width: 100%;
  color: rgb(63, 81, 181);
}