How did designer apply this css class?

I am using the MatBlazor component library: https://www.matblazor.com/

and I am trying to understand how the designer for this website: https://blazor-wasm.quarella.net/Account/Login

centered the <MatCard/> element like so:

My following code looks like this:

@page "/login"

@using System.Text.Json;
@using Data.Models
@using MatBlazor 

@inject HttpClient Http
    <MatCard >
        <MatCardContent >

        <MatH2>Login</MatH2>

        <button @onclick="OnLoginClick">Log in</button>

        <p>Need an account? Sign up</p>

        <button @onclick="OnSignUp">Sign up</button>
        </MatCardContent>
    </MatCard>

@code {

}

which outputs:

The example code provided here: Login Razor Page, specifically line 27 {<MatCard> doesn't have any classes but the element is centered nicely across the screen.

Two questions

1. How do I achieve this card centering effect using the MatBlazor library (minimal custom css)?
2. How the login page designer center it? I see there was a ".login-container" class added which is here but there's no indication of it being used in the razor page.

EDIT:

3. Where did the designer use class="login-body" or class="login-container" based on the answer below