Center — ARC UI

Components

Center

layout

static

<arc-center>

Overview

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% — it makes the centering constraint meaningless
Do not nest multiple Centers — a single Center wrapper is sufficient

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 — no JavaScript overhead
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 -->
    <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>
  `,
})
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>
    </>
  );
}

<!-- See HTML tab after running pnpm generate -->
<div class="arc-center">...</div>

<!-- See HTML (Inline) tab after running pnpm generate -->
<div class="arc-center" style="max-width:var(--max-width);margin-inline:auto">...</div>

API

Prop	Type	Default	Description
`max-width`	`string`	`'var(--max-width)'`	Maximum width for the centered content block. Accepts any CSS length or custom property. Only applies in default (block) centering mode.
`intrinsic`	`boolean`	`false`	Enables intrinsic centering mode using flexbox, which centers children based on their natural width rather than stretching to max-width.
`text`	`boolean`	`false`	Adds text-align: center for centering inline text content within the block.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight