---
title: Center
description: Center content horizontally and vertically
visibility: guest
draft: false
---

# Center

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

## Basic Usage

:::preview{title="Centered content"}
<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.

:::preview{title="Full-height center"}
<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.

:::preview{title="Inline center"}
<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.