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.
Max width variants usage
<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.
Intrinsic centering examples
<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.
Text centering examples
<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).
Usage Examples
Page Layout
Centered page layout
<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
Centered hero with text alignment
<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 with narrow max-width
<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
Centered form with intrinsic sizing
<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>Related
<layout-stack>— Vertical stacking layout<layout-cover>— Full-height vertically centered layout<layout-text>— Typography container