<!-- Protocore Design System — Center -->
# Center

- **Category:** Layout (`layout`)
- **Slug:** `layout/center`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Center } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/layout/center

> A flex box that centers its child on both axes, with an inline variant.

## When to use it

`Center` is a one-purpose primitive: perfectly center a single child on both axes. It saves you from re-deriving the `display:flex; place-items:center` idiom on every empty-state, loader, or badge wrapper. For laying out *multiple* children with a gap, reach for `Flex` or `Stack` instead — those own alignment across a row or column. Use the `inline` variant only when the centered thing must sit within running text.

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `className` | `string` | no | — | — |
| `inline` | `boolean` | no | `false` | Render as an inline-flex box instead of a block-level one. |
| `style` | `CSSProperties` | no | — | — |

## Examples

### Basics

`Center` centers its single child horizontally and vertically. Give it a height (or let it fill a parent) and drop in whatever needs centering — an empty-state, a spinner, a hero mark.

```tsx
import { Center, Panel, Text } from "@protocore/pds";

export default function CenterBasics() {
  return (
    <Panel style={{ height: 200 }}>
      <Center style={{ height: "100%" }}>
        <Text color="secondary" mono>
          No nodes reporting
        </Text>
      </Center>
    </Panel>
  );
}
```

### Inline

Set `inline` to center inline content — an icon next to a label — without forcing a block box. The `Center` then flows inside a line of text.

```tsx
import { Center, Text } from "@protocore/pds";
import { CircleCheck } from "lucide-react";

export default function CenterInline() {
  return (
    <Text>
      Deployment{" "}
      <Center inline style={{ gap: 6, verticalAlign: "middle" }}>
        <CircleCheck size={16} aria-hidden />
        <span>succeeded</span>
      </Center>{" "}
      across all 42 chains.
    </Text>
  );
}
```

## Do & don't

**Do**

- Use Center to place a single child at the center of a bounded area.
- Give Center or its parent a definite height so vertical centering has room.
- Switch on `inline` when centering an icon + label inside a line of text.

**Don't**

- Use Center to lay out several children — that is Flex or Stack.
- Expect vertical centering without a height on Center or its parent.

## Accessibility

**Notes**

- Center is a presentational flex `<div>` with no role of its own.
- It does not reorder content, so keyboard and reading order follow the DOM.

## Related

`flex`, `stack`, `grid`, `aspect-ratio`

---

© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/