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

Question

У меня есть карточка входа, которую я разработал с использованием угловых материалов, всякий раз, когда я запускаю ее на странице, контент остается слева от страницы.

Я пытался использовать flex и layout-align="center center", ноЯ все еще не могу вывести карточку в центр страницы

Что я делаю не так?

Вот мой HTML-код:

<mat-card class="example-card" layout="row" layout-align="center center">
  <mat-card-header>
    <div class="login-box-header" layout="row" layout-align="center center">
        <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>

, а вот содержимое по-прежнемуне по центру:

Answer 1

Исправлено с помощью Very simple 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>

Answer 2

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

1. первый путь.

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

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

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

2. Второй путь.

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

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

.example-card {margin: 0 auto;ширина: 40%;дисплей: встроенный блок;выравнивание по вертикали: среднее;}

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

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

Четвертый путь.

.mat-card-cvr {top: 50%;ширина: 100%;выравнивания текста: центр;Положение: фиксированный;}

.example-card {margin: 0 auto;Дисплей: встроенный блок;}