Center

Centers its content both ways.

An interactive page: C# runs over a Blazor Server connection.

Centers its children both ways, such as an icon in a square or an empty state in a panel.

Usage

razor

<Center Height="Length.Rem(12)">
    <Spinner />
</Center>

Icon tiles

Give Center a Width and Height to put an icon in the middle of a square tile; Bg and Radius style the tile.

Preview Code

Preview

Deploys

12 this week

Members

8 active

Alerts

2 open

Code

IconTiles.razor

<Row Gap="8" Wrap>
    <Row Gap="3" Align="Align.Center">
        <Center Width="3.Rem" Height="3.Rem" Bg="Color.PrimarySoft" Color="Color.PrimaryText" Radius="Radius.Lg">
            <Icon Name="Lucide.Rocket" />
        </Center>
        <Column>
            <TextBlock Weight="FontWeight.Semibold">Deploys</TextBlock>
            <TextBlock Size="TextSize.Sm" Color="Color.Muted">12 this week</TextBlock>
        </Column>
    </Row>
    <Row Gap="3" Align="Align.Center">
        <Center Width="3.Rem" Height="3.Rem" Bg="Color.SuccessSoft" Color="Color.SuccessText" Radius="Radius.Lg">
            <Icon Name="Lucide.Users" />
        </Center>
        <Column>
            <TextBlock Weight="FontWeight.Semibold">Members</TextBlock>
            <TextBlock Size="TextSize.Sm" Color="Color.Muted">8 active</TextBlock>
        </Column>
    </Row>
    <Row Gap="3" Align="Align.Center">
        <Center Width="3.Rem" Height="3.Rem" Bg="Color.WarningSoft" Color="Color.WarningText" Radius="Radius.Lg">
            <Icon Name="Lucide.Bell" />
        </Center>
        <Column>
            <TextBlock Weight="FontWeight.Semibold">Alerts</TextBlock>
            <TextBlock Size="TextSize.Sm" Color="Color.Muted">2 open</TextBlock>
        </Column>
    </Row>
</Row>

In a panel

Give Center a Height to center content in a panel, such as a spinner while a report loads.

Preview Code

Preview

Loading reports…

Code

Loading.razor

<Center Height="12.Rem" Border="1" BorderStyle="BorderStyle.Dashed" BorderColor="Color.Outline" Radius="Radius.Lg" Grow>
    <Column Gap="2" Align="Align.Center">
        <Spinner />
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Loading reports…</TextBlock>
    </Column>
</Center>

Mode support

What works in each mode, Center
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Parameters

Center parameters
Prop	Type	Default
`Inline`Renders as inline-flex, to sit in a line of text.	`bool`	`false`
`As`The element to render: div on a Box; components built on it set their own (List a ul, Section a section).	`string`	`"div"`
`ChildContent`The content.	`RenderFragment?`

Plus 25 surface props, 16 item props and 4 common props.

Full API