Css 如何使用MatBlazor将表单输入居中？

如何在此图像中居中表格输入？我使用这里定义的GridLayout：使用这里定义的表单元素

这是我的尝试，但我肯定错过了什么：

<div class="container login-layout mat">

    <MatCard>
        <MatCardContent>
            <EditForm Model="Login" OnValidSubmit="Success">
                <div class="mat-layout-grid">
                    <div class="mat-layout-grid-inner">

                        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-12">

                            <MatH2>Login</MatH2>
                        </div>

                        <div class="mx-auto
                         mat-layout-grid-cell
                         mat-layout-grid-cell-span-12">


                            <MatTextField ValidationDisabled="true" Label="Username" @bind-Value="Login.Username" />
                            <MatTextField ValidationDisabled="true" Type="Password" Label="Password" @bind-Value="Login.Username" />

                        </div>

                        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-12">

                            <MatButton class="float-right">Log in</MatButton>
                            @*<MatButton class="float-right" @onclick="OnLoginClick">Log in</MatButton>*@
                        </div>
                    </div>
                </div>
            </EditForm>

            <div class="container">
                <MatCaption>Need an account? </MatCaption>

                <MatButton class="float-right aslkjd-c0ass" @onclick="OnSignUp">Sign up</MatButton>

            </div>
        </MatCardContent>
    </MatCard>
</div>

登录
登录
@*登录*@
需要账户吗？
注册

如果提供宽度或最大宽度，则mx auto或x轴中的边距auto在div中工作。尝试在输入字段本身上使用它，或者尝试给div一个宽度，或者您可以在div上使用flex-justify-content:center和flex-direction:column

有没有办法使用MatBlazor设置宽度？