css - 设计师是如何应用这个 CSS 类的？

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，特别是第 27 行 {<MatCard>没有任何类，但元素在屏幕上很好地居中。

两个问题

1. 如何使用 MatBlazor 库（最小自定义 css）实现此卡片居中效果？
2. 登录页面设计器如何居中呢？我看到这里添加了一个“.login-container”类，但没有迹象表明它在剃须刀页面中使用。

编辑：

3. 设计师在哪里使用class="login-body"或class="login-container"基于以下答案

Answer 1

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

2. 很可能，根据您引用的样式表，登录页面上的包装元素引用位于此处的 CSS 。它被称为.login-body，就像上面的第 1 项一样，它使用边缘auto水平居中。

3. login-body和类通过login-container共享/组件或共享/布局应用于页面。例如，您在问题中引用的登录页面似乎正在使用LoginLayout.razor here。在那里你可以看到这两个类都被使用了。