/// Layout
Center
A flex box that centers its child on both axes, with an inline variant.
import { Center } from "@protocore/pds";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.
No nodes reporting
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.
Deployment
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.
Usage
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
- 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.
Center props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
inline | boolean | false | Render as an inline-flex box instead of a block-level one. |
style | CSSProperties | — |