Централизация md карты угловой материал

Question

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

html:

<mat-card class="card" layout-align="center center">
  <form (ngSubmit)="onSubmit(UserLogin)">
    <div class="container">
      <mat-form-field>
        <input matInput placeholder="E-mail" [formControl]="email" required>
        <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Senha" [type]="hide ? 'password' : 'text'" [formControl]="password">
        <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
      </mat-form-field>
      <div>
        <button mat-raised-button color="accent" type="submit">Entrar</button>
      </div> 
    </div>
  </form>
</mat-card>

Answer 1

добавить это в css-файл компонента

:host{
  display: flex;
  min-height: 100vh;
}
mat-card{
  margin: auto;
}

Answer 2

Вы можете использовать position:absolute с левым и верхним позиционированием, и преобразование должно работать

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  height: 100vh;
}

form {
  border: 1px solid;
  display: inline-block;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

<form>
  <div><input type="text" placeholder="First Name" name=""></div>
  <div><input type="text" placeholder="Last Name" name=""></div>
  <div><input type="text" placeholder="Email" name=""></div>
</form>