设计师是如何应用这个cssclass的？

Question

我正在使用 MatBlazor 组件库：https://www.matblazor.com/

并且我正在尝试了解该网站的设计者：https://blazor-wasm.quarella.net/Account/Login

将 <MatCard/> 元素居中，如下所示：

我的以下代码如下所示：

@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 {

}

输出：

此处提供的示例代码：Login Razor Page, specifically line 27 {<MatCard> 没有任何 class 元素，但元素在屏幕上很好地居中。

两个问题

如何使用 MatBlazor 库（最小自定义 css）实现这种卡片居中效果？
如何登录页面设计中心呢？我看到添加了一个“.login-container”class，它是 here，但没有迹象表明它在 razor 页面中被使用。

编辑：

根据下面的回答，设计者在哪里使用了class="login-body"或class="login-container"

Answer 1

正如您所提到的，如果您检查登录页面的元素，您可以看到 MatCard 使用的是 class login-container，它在左侧应用边距 auto和元素的右侧。这就是导致它居中的原因。

很可能，根据您引用的样式表，登录页面上的包装元素引用位于 here 的 CSS。它被称为 .login-body，就像上面的第 1 项一样，它使用 auto 的边距来水平居中。
login-body 和 login-container class 由 Shared/Components 或 Shared/Layouts 应用于页面。例如，您在问题中引用的登录页面似乎使用了 LoginLayout.razor here。在那里你可以看到这两个 classes 都被使用了。

设计师是如何应用这个cssclass的？

How did designer apply this css class?

css

blazor

blazor-server-side

matblazor