Skip to main content
WireKit
Copy for LLM

Center

A flex container that centers its children both horizontally and vertically. Replaces flex items-center justify-center boilerplate.

Basic Usage

Centered content
Centered 
<x-wirekit::center style="height: 150px; background: var(--color-wk-bg-muted); border-radius: var(--radius-wk-lg)">
    <x-wirekit::badge intent="primary">Centered</x-wirekit::badge>
</x-wirekit::center>

Full-Page Centering

Combine with a height utility for full-viewport centering — great for loading states or empty pages.

Full-height center
Loading... 
<x-wirekit::center style="height: 200px; background: var(--color-wk-bg); border: 1px solid var(--color-wk-border); border-radius: var(--radius-wk-lg)">
    <x-wirekit::stack align="center" gap="sm">
        <x-wirekit::progress :value="65" style="width: 200px" />
        <x-wirekit::badge intent="neutral">Loading...</x-wirekit::badge>
    </x-wirekit::stack>
</x-wirekit::center>

Inline Center

Use :inline="true" for an inline-flex variant that sits within text flow.

Inline center
1
2 
<x-wirekit::row gap="sm">
    <x-wirekit::center :inline="true" style="width: 48px; height: 48px; background: var(--color-wk-bg-muted); border-radius: var(--radius-wk-lg)">
        <x-wirekit::badge intent="success" size="sm">1</x-wirekit::badge>
    </x-wirekit::center>
    <x-wirekit::center :inline="true" style="width: 48px; height: 48px; background: var(--color-wk-bg-muted); border-radius: var(--radius-wk-lg)">
        <x-wirekit::badge intent="warning" size="sm">2</x-wirekit::badge>
    </x-wirekit::center>
</x-wirekit::row>

Props

Prop Type Default Description
inline bool false Use inline-flex instead of flex
as string 'div' HTML element to render
scope string|null null Scoped personalization name

Keyboard Interaction

This component is a layout wrapper. Keyboard interaction is delegated to its children.

Design Tokens

The Center is a pure layout primitive — it applies display: flex (or inline-flex) with align-items: center and justify-content: center, then renders its slot. It carries no color, border, typography, or spacing tokens of its own.

Was this page helpful?

Voting requires cookies or local storage. What we store