Skip to content
Primitiv home
Framework
Consumption mode
Search the docs

Center

stableSource Figma

A single- or both-axis Flexbox centring box.

Playground

Density

Preview

Centered
Axis
import { Center } from "@/components/ui/center";
<Center axis="both">  <p>Centered content</p></Center>

Density is set by a data-density ancestor — the Context system, not a Center prop.

Installation

npx primitiv add center

Import

import { Center } from "@/components/ui/center";

No headless primitive — this one ships only as a copied styled surface, so primitiv add is the only way in, whichever mode you are reading.

Props

Generated from the copied file’s props type and contract.json. Never hand-maintained.

Center

Extends HTMLDivElement — every native attribute of that element is accepted and forwarded.

PropTypeDefaultDescription
asChildboolean—Render the single child element instead of a wrapping <div>, merging the center classes onto it — e.g. <Center asChild><section>...</section></Center>.
axis"both" | "horizontal" | "vertical"bothWhich axis (or axes) to centre content along.

Styling contract

0 CSS custom properties on .primitiv-center — mode-agnostic. These names are the stable surface; the values are not.

Accessibility

  • Center renders a plain <div> with no semantics — it is a layout wrapper, so a screen reader reads straight through to the child.
  • When the centred region is a landmark or a labelled section, use asChild to render the right element (<section>, <main>) rather than nesting one inside an anonymous <div>.
  • Centring is purely visual and does not touch DOM order, so reading and focus order are unaffected — safe to use anywhere without desyncing the tab sequence.

Examples

Every example below reacts to the density control. Currently showing Styled mode.

Both axes

The default. axis="both" centres its child horizontally and vertically — the empty-state message in a panel, a spinner while data loads, the glyph inside an icon button. It replaces the display: flex; place-items: center you would otherwise hand-write every time, and it only takes effect when the box is taller and wider than the child.

Density
Nothing here yet
import { Center } from "@/components/ui/center";
<Center style={{ minBlockSize: "12rem" }}>  <p>Nothing here yet</p></Center>

One axis only

axis="horizontal" centres across the inline axis but leaves the block axis alone (the child stays at the top); axis="vertical" does the reverse. Reach for a single axis when only one direction needs centring — a call-to-action centred across a section but sitting at its natural vertical position.

Density
horizontal
vertical
import { Center } from "@/components/ui/center";
<Center axis="horizontal">  <button>Get started</button></Center>