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.
Installation
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
Requires React 19+, base CSS and a Theme provider. See Setup.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
| axis | 'both' | 'horizontal' | 'vertical' | '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 | 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={{}}. |
Usage guidance
- 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.
- Avoid: Wrap large page sections in Center. Use Layout or AppShell for page-level structure.
- Avoid: Use Center for horizontal lists of items. Use Stack with hAlign="center" instead.
Theming API
{
"targets": [
{
"className": "astryx-center",
"visualProps": [
"axis"
]
}
]
}
Anatomy
- Container: A flexbox wrapper that aligns its children to the center along the chosen axis.
- Content: Any children passed to Center. Typically a card, form, spinner, or empty state message.
Examples
- Center: Content centered horizontally and vertically inside a fixed-height container.
- Center — Horizontal Center: A formatting control group centered with axis="horizontal" in the default horizontal writing mode. In other writing modes, Center currently follows the flex main axis rather than guaranteeing physical horizontal centering.
- Center — Vertical & Horizontal Center: An empty state with an icon, heading, and description centered both vertically and horizontally inside a card. This is the most common use of Center: placing content in the middle of a fixed-height area like a panel, card, or content region. The height prop defines the centering space.
Complete example dependencies
Some examples import optional icons. The per-example install command in the examples list identifies exactly what that example needs. For all examples on this page:
npm install @heroicons/react@2.2.0