layout-center

Horizontally centered content container with configurable max-width. Essential for constraining content width on wide screens.

Attributes

Attribute Values Default Description
data-layout-max narrow, normal, wide normal Maximum width (45rem, 60rem, 80rem)
data-layout-intrinsic boolean - Centers content that is narrower than max-width
data-layout-text boolean - Centers text alignment
data-layout-gutter none, s, l m Horizontal padding (gutter)

Max Width Variants

The data-layout-max attribute controls the maximum width of the container.

data-layout-max="narrow" (45rem) - Ideal for reading content

This content is constrained to a narrow width, perfect for long-form reading where line length matters for readability.

data-layout-max="normal" (60rem) - Default, balanced width

Normal width provides a good balance for most content types including text, forms, and mixed layouts.

data-layout-max="wide" (80rem) - For dashboards and data-heavy layouts

Wide containers work well for dashboards, data tables, and layouts that benefit from more horizontal space.

Code

<layout-center data-layout-max="narrow"> <article>Long-form reading content...</article> </layout-center> <layout-center data-layout-max="normal"> <!-- Default width for most layouts --> </layout-center> <layout-center data-layout-max="wide"> <!-- Dashboard or data table --> </layout-center>

Intrinsic Centering

The data-layout-intrinsic attribute centers content that is narrower than the max-width.

Centered Card

This card is intrinsically centered.

Code

<layout-center data-layout-intrinsic> <button type="button">Centered Button</button> </layout-center> <layout-center data-layout-intrinsic> <layout-card style="max-inline-size: 20rem;"> Intrinsically centered card </layout-card> </layout-center>

Text Centering

The data-layout-text attribute adds text-align: center for centered text content.

Centered Heading

All text content within this container is centered, making it perfect for hero sections and call-to-action blocks.

Combined: Intrinsic + Text

Fully Centered

Both container and text are centered.

Code

<layout-center data-layout-text> <h2>Centered Heading</h2> <p>Centered paragraph text.</p> </layout-center> <layout-center data-layout-intrinsic data-layout-text> <!-- Both container and text centered --> </layout-center>

Gutter Variants

The data-layout-gutter attribute controls horizontal padding (useful for nested centers).

data-layout-gutter="none"

No side padding - content touches edges.

data-layout-gutter="s"

Small gutter padding.

data-layout-gutter="l"

Large gutter padding.

Usage Examples

Page Layout

Logo Home About Contact

Main page content goes here.
<layout-center data-layout-max="normal"> <layout-stack data-layout-gap="xl"> <header> <layout-cluster data-layout-justify="between"> <strong>Logo</strong> <nav>...</nav> </layout-cluster> </header> <main> <p>Main page content</p> </main> </layout-stack> </layout-center>

Hero Section

Welcome to Our Platform

Build amazing products with our comprehensive toolkit designed for modern development.
<layout-center data-layout-max="narrow" data-layout-text data-layout-intrinsic> <layout-stack data-layout-gap="l" data-layout-align="center"> <h1>Welcome to Our Platform</h1> <p>Build amazing products with our toolkit.</p> <layout-cluster data-layout-gap="m"> <button type="button">Get Started</button> <button type="button" class="secondary">Learn More</button> </layout-cluster> </layout-stack> </layout-center>

Article Content

Article Title

The narrow max-width ensures optimal line length for reading. Research shows that 45-75 characters per line is ideal for readability.

This container automatically centers itself and maintains comfortable margins on all screen sizes.
<layout-center data-layout-max="narrow"> <layout-text> <h2>Article Title</h2> <p>Narrow max-width ensures optimal line length.</p> <p>45-75 characters per line is ideal.</p> </layout-text> </layout-center>

Form Container

Sign In
<layout-center data-layout-max="narrow" data-layout-intrinsic> <layout-card data-variant="outlined"> <layout-stack data-layout-gap="m"> <h3>Sign In</h3> <layout-stack data-layout-gap="xs"> <label for="email">Email</label> <input type="email" id="email" /> </layout-stack> <layout-stack data-layout-gap="xs"> <label for="password">Password</label> <input type="password" id="password" /> </layout-stack> <button type="submit">Sign In</button> </layout-stack> </layout-card> </layout-center>

CSS Implementation

layout-center { display: block; box-sizing: content-box; max-inline-size: var(--_max, var(--content-normal, 60rem)); margin-inline: auto; padding-inline: var(--size-m); } /* Width variants */ layout-center[data-layout-max="narrow"] { --_max: var(--content-narrow, 45rem); } layout-center[data-layout-max="normal"] { --_max: var(--content-normal, 60rem); } layout-center[data-layout-max="wide"] { --_max: var(--content-wide, 80rem); } /* Intrinsic centering */ layout-center[data-layout-intrinsic] { display: flex; flex-direction: column; align-items: center; } /* Text centering */ layout-center[data-layout-text] { text-align: center; } /* Gutter variants */ layout-center[data-layout-gutter="none"] { padding-inline: 0; } layout-center[data-layout-gutter="s"] { padding-inline: var(--size-s); } layout-center[data-layout-gutter="l"] { padding-inline: var(--size-l); }

Related Elements