Center

Stable Available in release assets

Center constrains readable content measure and centers it with a resilient inline gutter.

Center primary example

<section class="thin-center">
  <h1>Readable title</h1>
  <p>Body copy stays within a comfortable measure on wide screens.</p>
</section>

Show code

<section class="thin-center">
  <h1>Readable title</h1>
  <p>Body copy stays within a comfortable measure on wide screens.</p>
</section>

Anatomy

Layout wrapper or semantic adapter
Authored content

Variants and sizes

<thin-center>
class="thin-center"
--thin-center-max and --thin-center-gutter overrides

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Narrow viewport
Long content
Right-to-left content
200% text

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Layout never changes semantic order. Links, landmarks, headings, and document scrolling remain browser-native.

Accessibility

Preserve DOM reading order, use semantic wrappers when landmarks or headings are required, and never rely on layout alone to communicate structure.

Contract: PLATFORM
Basis: Native CSS layout and document defaults over semantic HTML; no APG widget

API

Center is a CSS-only layout host that caps measure and keeps gutters. Use either host form; override measure and gutter with local custom properties.

Behavior tier: css-only

Hosts

Apply the class to the HTML element that supplies the appropriate landmark or content role.

<section class="thin-center">…</section>
<div class="thin-center">…</div>

Custom properties

PropertyDefaultDescription

--thin-center-maxvar(--thin-measure)Maximum inline size of the centered measure.

--thin-center-guttervar(--thin-space-m)Minimum inline padding when the viewport is narrower than the measure.

Examples

Readable measure

Readable title

Body copy stays within a comfortable measure on wide screens.

<section class="thin-center">
  <h1>Readable title</h1>
  <p>Body copy stays within a comfortable measure on wide screens.</p>
</section>

Fallback

Normal document flow remains readable if CSS is unavailable.

Assets and dependencies

/layouts.css

Dependencies: None

Source: packages/ui/src/style/layouts.ts

Stability evidence

Canonical public API and complete documentation: test:tests/unit/release/stability.test.ts
Production-asset difficult-content fixture: test:tests/unit/release/stability.test.ts
Recorded cross-theme and environmental review protocol: review:site/src/pages/quality/foundation-layout.astro#review-protocol