Search code examples
c#razorblazor

Center page content

How can I center content page in the horizontal axis in Blazor?

So far I've been using MudBlazor's MudPaper for this but after upgrading to .NET8 this stopped working:

<MudPaper Class="d-flex justify-space-between flex-grow-1 gap-4" Elevation="0">

...so I'm looking a standard Blazor solution to this and I cannot find anything in Google that would work.

Solution

  • What you are looking for in this case is CSS.

    Blazor is mainly a programing framework running on web assambly that mostly replaces javascript (javascript interop is still needed for some functions).

    You can center a html object in the horizontal axis by creating a CSS class and then use it on the object:

    .my-class {
      display: flex;
      justify-content: center;
    }
    <MudPaper Class="my-class" Elevation="0"> Test </MudPaper>