Center

Center content horizontally with optional gutters, max width, and text alignment.

Examples

Properties

Property	Attribute	Description	Type name	Type	Default
`max`	`max`	CSS max-width value for the centered container	`string`	`string`	`"var(--measure)"`
`andText`	`and-text`	Also center-align text inside the container	`boolean`	`boolean`	`false`
`gutters`	`gutters`	Side padding token (`none`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`; default `none`)	`DuoSpacing`	`(typeof duoSpacingValues)[number]`	`"none"`
`intrinsic`	`intrinsic`	Center children by their intrinsic width	`boolean`	`boolean`	`false`

Slots

Name	Description
`default`	Content to center

Usage

Center constrains and centers block content—typical for article bodies, forms, or hero sections—using a configurable max width (default var(--measure)).

Do

Set max to the layout measure that fits your content column.
Use gutters for responsive side padding when the centered block touches viewport edges.
Enable and-text when headings and paragraphs inside should be text-centered.
Use intrinsic when children should center by their own width rather than filling the container.

Don’t

Don’t nest multiple Center wrappers without a clear layout reason—prefer one outer constraint per section.