Skip to content
← Inventory

Center

Center centers its children both vertically and horizontally using flexbox. **Important:** Children that use CSS Grid with fr units must define their own width (e.g., w-96, max-w-md). This is because fr units require a defined container width to calculate available space, but flex items without explicit width use intrinsic sizing—creating a circular dependency where the grid collapses to minimum content width.

Centered

Usage

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

Best practices

  • Center centers a single child on both axes; grid children using fr units need an explicit width (e.g. w-96) or they collapse to min-content.

  • as/asChild are mutually exclusive (asChild wins, dev-warned); use inline to center inline-level content without breaking the text flow.

Props

PropTypeDefaultDescription
as"div" | "li" | "nav" | "ol" | "span" | "ul" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "main" | "section"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: as="button" is a type error, because the design-system answer is the Button component. Ref and event-handler types remain the default element's (HTMLDivElement). as and asChild are mutually exclusive; if both are passed, asChild wins (a dev-only warning fires).

asChildboolean

Merge props onto child element

inlineboolean

Use inline-flex instead of flex for inline centering

Also exports

  • interfaceCenterProps

Composition

Used by

LoadingState, ProductCard