Layout·component·@astryxdesign/core

Center

Center aligns content to the middle of its container. Use it for empty states, loading screens, login forms, or any content that should sit in the center of the available space.

Open in Playground @astryxdesign/core/Center

Showcases and examples

3 documented examples

Center

Content centered horizontally and vertically inside a fixed-height container.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · center-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {Center} from '@astryxdesign/core/Center';
import {Stack} from '@astryxdesign/core/Layout';
import {Text, Heading} from '@astryxdesign/core/Text';

export default function CenterShowcase() {
  return (
    <Center axis="both" width="100%" height={240}>
      <Stack direction="vertical" gap={2} hAlign="center">
        <Heading level={4}>Centered content</Heading>
        <Text type="body" color="secondary">
          Horizontally and vertically aligned.
        </Text>
      </Stack>
    </Center>
  );
}

Usage

Center aligns content to the middle of its container. Use it for empty states, loading screens, login forms, or any content that should sit in the center of the available space.

Use a single-axis value only in horizontal writing, or after verifying the active writing mode. In vertical writing, the current implementation follows flex main/cross axes rather than the physical prop names.
In horizontal writing, give Center height when using axis="vertical"; centering needs available space on the selected flex axis.
Use isInline to center small elements like icons or badges within a line of text without breaking the text flow.
Keep semantic structure and accessible names on the content. Center is a layout-only container and does not add a role or label.
Wrap large page sections in Center. Use Layout or AppShell for page-level structure.
Use Center for horizontal lists of items. Use Stack with hAlign="center" instead.

Typed props

Prop	Type and behavior
`axis`	`'both' \| 'horizontal' \| 'vertical'` · default 'both' Which Center mode to use. In horizontal writing, "horizontal" centers the flex main/inline axis and "vertical" centers the cross/block axis. In vertical writing, current single-axis behavior follows those logical flex axes rather than the physical names; "both" still centers both axes.
`width`	`SizeValue` Container width (px or CSS value).
`height`	`SizeValue` Container height (px or CSS value).
`maxWidth`	`SizeValue` Maximum container width (px or CSS value).
`minHeight`	`SizeValue` Minimum container height (px or CSS value).
`padding`	`0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10` Inner padding on all sides, using the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10). Matches the padding prop on Stack, Card, LayoutContent, and LayoutPanel. Pass as a JSX number expression e.g. padding={3}.
`paddingInline`	`0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10` Logical inline-axis padding, using the spacing scale. Overrides padding on the inline axis when both are set.
`paddingInlineStart`	`0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10` Logical inline-start padding, using the spacing scale. Its resolved physical edge depends on writing mode and direction. Overrides paddingInline and padding on that edge only.
`paddingInlineEnd`	`0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10` Logical inline-end padding, using the spacing scale. Its resolved physical edge depends on writing mode and direction. Overrides paddingInline and padding on that edge only.
`paddingBlock`	`0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10` Logical block-axis padding, using the spacing scale. Overrides padding on the block axis when both are set.
`paddingBlockStart`	`0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10` Logical block-start padding, using the spacing scale. Its resolved physical edge depends on writing mode. Overrides paddingBlock and padding on that edge only.
`paddingBlockEnd`	`0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10` Logical block-end padding, using the spacing scale. Its resolved physical edge depends on writing mode. Overrides paddingBlock and padding on that edge only.
`isInline`	`boolean` · default false Use inline-flex (useful for text/icons).
`children`	`ReactNode` Content to center.
`xstyle`	`StyleXStyles` StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.

Anatomy

Container · required

A flexbox wrapper that aligns its children to the center along the chosen axis.

Content · required

Any children passed to Center. Typically a card, form, spinner, or empty state message.

Theming

Targets

astryx-center

Visual props: axis