Center

Center centres 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.

Usage

import { Center, CenterProps } from "@instruments/materia-ui/components/center";

Best practices

Center centres 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/render are mutually exclusive (render wins, dev-warned); use inline to center inline-level content without breaking the text flow.
Use as to change the element (a tag); use render only to swap in a component (e.g. a router Link). Never render={<Box as=…/>} - pass as directly.

Props

Prop	Type	Description
as	`"div" \| "article" \| "aside" \| "figcaption" \| "figure" \| "footer" \| "header" \| "li" \| "main" \| "nav" \| "ol" \| "section" \| "span" \| "ul"`	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. Event handlers and the ref accept any host element. `as` and `render` are mutually exclusive; if both are passed, `render` wins (a dev-only warning fires).
inline	`boolean`	Use inline-flex instead of flex for inline centring
ref	`LayoutRef \| undefined`	Ref to the rendered host, whichever element `as` selects.

Also exports

interfaceCenterProps