如何用MudBlazor实现内容垂直居中？（基于.NET7与MudBlazor6.1.7）

你可以直接利用MudBlazor集成的Bootstrap工具类来实现垂直居中，不需要额外自定义CSS，以下是两种适配你现有代码的方案：

方案一：直接给容器添加工具类 #

修改你的MudContainer，添加h-100（让容器占满视口高度）、d-flex（启用弹性布局）、align-items-center（垂直居中）类，结合已有的水平居中设置，就能实现整体居中：

<MudThemeProvider />
<MudContainer MaxWidth="MaxWidth.Small" Class="d-flex align-items-center justify-content-center h-100">
    @Body
</MudContainer>

方案二：通过MudGrid属性实现 #

给MudGrid添加AlignItems="AlignItems.Center"属性，同时让MudContainer和MudGrid都占满视口高度：

<MudThemeProvider />
<MudContainer MaxWidth="MaxWidth.Small" Class="h-100">
    <MudGrid Justify="Justify.Center" AlignItems="AlignItems.Center" Class="h-100">
        <MudItem>
            @Body
        </MudItem>
    </MudGrid>
</MudContainer>

注意事项 #

如果页面整体高度没有占满视口，需要确保html和body元素的高度设置为100%，可以在全局CSS中添加：

html, body {
    height: 100%;
    margin: 0;
}

以上两种方案都用了MudBlazor内置的样式类和组件属性，不需要额外自定义CSS就能实现登录表单在窗口正中央的效果。

内容的提问来源于stack exchange，提问作者GrayFox