Center
Content centering primitive with max-width, intrinsic centering, and text-center options.
<arc-center>Overview
Center is a layout primitive that horizontally centers its children within the available space. By default it applies margin-inline: auto with a configurable max-width, the standard block-level pattern for keeping a content column centered at a readable width.
The intrinsic prop switches to intrinsic centering mode, which uses display: flex with align-items: center and justify-content: center to center children based on their natural (intrinsic) size rather than stretching them to the max-width. Use it for buttons, icons, or short labels that should not stretch to fill a column.
The text prop adds text-align: center for centering inline text content within the block. The three modes (block, intrinsic, and text centering) can be combined, which covers most centering cases without custom CSS.
Guidelines
When to use
- Use default mode for centering page content columns with a max-width
- Use intrinsic mode for centering buttons, icons, or small elements by their natural width
- Use text mode for centering heading text or short descriptive paragraphs
- Combine intrinsic and text modes for centered call-to-action sections
- Override max-width to match your layout needs (e.g. "480px" for narrow forms)
When not to use
- Do not use Center as a substitute for Container. Container adds padding; Center only centers
- Do not use Center for vertical centering; it handles horizontal centering only
- Do not apply Center to elements that should be full-width (like navigation bars)
- Do not set max-width to 100%, which makes the centering constraint meaningless
- Do not nest multiple Centers; a single Center wrapper is enough
Features
- Block-level centering with `margin-inline: auto` and configurable `max-width`
- Intrinsic centering mode with flexbox for natural-width children
- Text centering mode with `text-align: center` for inline content
- Configurable max-width via the `max-width` prop (defaults to --max-width token)
- Modes can be combined: intrinsic + text for centered buttons with centered labels
- Pure CSS, with no JavaScript
- CSS part: `center` for targeted ::part() styling
Preview
Block centering — max-width: 280px
Intrinsic centering
Text centering — text-align: center
Usage
<!-- Block centering with max-width -->
<arc-center max-width="720px">
<h2>Centered Heading</h2>
<p>This content is constrained to 720px and centered on the page.</p>
</arc-center>
<!-- Intrinsic centering for a button -->
<arc-center intrinsic>
<arc-button>Centered Button</arc-button>
</arc-center>
<!-- Text centering -->
<arc-center text>
<p>This text is centered within the full-width block.</p>
</arc-center>import { Center, Button } from '@arclux/arc-ui-react';
function HeroSection() {
return (
<>
{/* Block centering */}
<Center maxWidth="720px">
<h2>Centered Heading</h2>
<p>Content constrained to 720px.</p>
</Center>
{/* Intrinsic centering */}
<Center intrinsic>
<Button>Centered Button</Button>
</Center>
{/* Text centering */}
<Center text>
<p>This text is centered.</p>
</Center>
</>
);
}<script setup>
import { Center, Button } from '@arclux/arc-ui-vue';
</script>
<template>
<!-- Block centering -->
<Center max-width="720px">
<h2>Centered Heading</h2>
<p>Content constrained to 720px.</p>
</Center>
<!-- Intrinsic centering -->
<Center intrinsic>
<Button>Centered Button</Button>
</Center>
<!-- Text centering -->
<Center text>
<p>This text is centered.</p>
</Center>
</template><script>
import { Center, Button } from '@arclux/arc-ui-svelte';
</script>
<!-- Block centering -->
<Center max-width="720px">
<h2>Centered Heading</h2>
<p>Content constrained to 720px.</p>
</Center>
<!-- Intrinsic centering -->
<Center intrinsic>
<Button>Centered Button</Button>
</Center>
<!-- Text centering -->
<Center text>
<p>This text is centered.</p>
</Center>import { Component } from '@angular/core';
import { Center, Button } from '@arclux/arc-ui-angular';
@Component({
imports: [Center, Button],
template: `
<!-- Block centering -->
<arc-center max-width="720px">
<h2>Centered Heading</h2>
<p>Content constrained to 720px.</p>
</arc-center>
<!-- Intrinsic centering -->
<arc-center intrinsic>
<arc-button>Centered Button</arc-button>
</arc-center>
<!-- Text centering -->
<arc-center text>
<p>This text is centered.</p>
</arc-center>
`,
})
export class HeroSectionComponent {}import { Center, Button } from '@arclux/arc-ui-solid';
function HeroSection() {
return (
<>
<Center maxWidth="720px">
<h2>Centered Heading</h2>
<p>Content constrained to 720px.</p>
</Center>
<Center intrinsic>
<Button>Centered Button</Button>
</Center>
<Center text>
<p>This text is centered.</p>
</Center>
</>
);
}import { Center, Button } from '@arclux/arc-ui-preact';
function HeroSection() {
return (
<>
<Center maxWidth="720px">
<h2>Centered Heading</h2>
<p>Content constrained to 720px.</p>
</Center>
<Center intrinsic>
<Button>Centered Button</Button>
</Center>
<Center text>
<p>This text is centered.</p>
</Center>
</>
);
}<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-center — requires center.css + base.css (or arc-ui.css) -->
<div class="arc-center">
Center
</div><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-center — self-contained, no external CSS needed -->
<div class="arc-center" style="display: block; box-sizing: border-box; margin-inline: auto; max-width: 60ch; padding-inline: 24px">
Center
</div>API
max-widthstring'60ch'- Maximum width for the centered content block. Accepts any CSS length or custom property. Only applies in default (block) centering mode.
intrinsicbooleanfalse- Enables intrinsic centering mode using flexbox, which centers children based on their natural width rather than stretching to max-width.
textbooleanfalse- Adds text-align: center for centering inline text content within the block.