Center

Horizontally centered container with a configurable max-width.

Category: layout · WCAG 2.1-AA · layout, center, wrapper

Props

Design tokens

• --cascivo-space-4

When to use

• Horizontally centering content within a configurable max-width
• Constraining page or section content to a readable measure

When not to use

• Stacking children with consistent gaps — use Flex
• Multi-column or grid arrangements — use Columns or Grid

Examples

Centered content

Centered container with custom max-width

<Center maxWidth="60rem"><p>Content</p></Center>

Related components

• Section — Sections use a centered inner width built on the same idea
• Flex — Stack the centered content vertically inside it with Flex

← Back to docs