Login Form Design in Angular Material

login-form.component.css

.login-form-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.button-flex-container {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

login-form.component.html

<div class="login-form-flex">
  <mat-card>
    <mat-card-title>
      Login
    </mat-card-title>
    <mat-card-content>
      <mat-form-field>
        <input matInput placeholder="User Name">
      </mat-form-field>
      <br/>
      <mat-form-field>
        <input type="password" matInput placeholder="Password"/>
      </mat-form-field>
    </mat-card-content>
    <mat-card-actions>
      <div class="button-flex-container">
        <button mat-raised-button color="primary">Login</button>
      </div>
    </mat-card-actions>
  </mat-card>
</div>

The CSS uses FlexBox properties to align content. The login form is centered in the screen both horizontally and vertically.

The following shows how the login looks like in a browser:

Very useful thanks a lot!