The Center composition constrains the width of content and centers it horizontally. Use it for a centered footer inside a page column, content that acts like a readable column, etc.
Examples
This block is constrained to a readable max-width and centered horizontally with auto margins.
<div class="center box is-bordered" style="--center-max: 32rem">
<p>
This block is constrained to a readable max-width and centered horizontally with auto
margins.
</p>
</div>
Reference
Source: src/css/composition.css
Applies to
.center
Tokens
| Token | Default | Description |
|---|---|---|
--center-max | 65rem | Maximum content width |
--center-gutter | var(--ui-pad-inline-relaxed) | Inline padding that narrows the content area |