Expected behavior

I'm triyng align a card vertically on center for a Login page, but everything I do is not working.

Actual behavior My card only stay on top.

Resources (screenshots, code snippets etc.)

<div class="container">
  <div class="row justify-content-center align-items-center">
    <div class="col-md-5 col-sm-8">
      <mdb-card class="card-login">
        <form class="text-center p-5">
          <img
            src=".././assets/sense.png"
            class="img-fluid mb-4"
            alt="Responsive image"
          />

          <!-- Matricula -->
          <input
            [(ngModel)]="usuario.matricula"
            name="matricula"
            type="text"
            id="defaultLoginFormEmail"
            class="form-control mb-2 input-field"
            placeholder="Matricula"
          />

          <!-- Senha -->
          <input
            [(ngModel)]="usuario.password"
            name="senha"
            type="password"
            id="defaultLoginFormPassword"
            class="form-control mb-2 input-field"
            placeholder="Senha"
          />

          <button
            mdbBtn
            class="my-1 login-btn"
            type="submit"
            mdbWavesEffect
            (click)="fazerLogin()"
          >
            Entrar
          </button>
        </form>
      </mdb-card>
    </div>
  </div>
</div>