Props

Name	Type	Default	Description
axis	'both' | 'horizontal' | 'vertical'	'both'	Which axis to center. both centers the main and the cross axis, horizontal centers the inline direction only, and vertical centers the block direction only. A single-axis value ends up on flex alignment, so outside horizontal writing it follows the flex main and cross axes.
width	number | string	—	Container width. Numbers are interpreted as pixels, strings pass through as CSS values.
height	number | string	—	Container height. Numbers are interpreted as pixels. Vertical centering needs height to distribute, so the default both and vertical usually use it.
maxWidth	number | string	—	Maximum container width. Numbers are interpreted as pixels.
minHeight	number | string	—	Minimum container height. Numbers are interpreted as pixels.
padding	SpacingStep	—	Inner padding on all four edges, using the Astryx spacing scale.
paddingInline	SpacingStep	—	Inline-axis padding; overrides padding on that axis.
paddingInlineStart	SpacingStep	—	Inline-start padding; overrides that edge only, and takes precedence over paddingInline and padding. The physical edge follows writing mode and direction.
paddingInlineEnd	SpacingStep	—	Inline-end padding; overrides that edge only, and takes precedence over paddingInline and padding. The physical edge follows writing mode and direction.
paddingBlock	SpacingStep	—	Block-axis padding; overrides padding on that axis.
paddingBlockStart	SpacingStep	—	Block-start padding; overrides that edge only, and takes precedence over paddingBlock and padding. The physical edge follows writing mode.
paddingBlockEnd	SpacingStep	—	Block-end padding; overrides that edge only, and takes precedence over paddingBlock and padding. The physical edge follows writing mode.
isInline	boolean	false	Render as inline-flex, so the container stays in a line of text. Useful for centering small elements such as icons and badges.

SpacingStep accepts these values:

type SpacingStep = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10

Slots

Name	Description
default	The content to center. It is centered as one block: Center adds no space between several children and changes none of their semantics, colors, or reading order.

Native attributes

The root element is a <div>.

The following go to the root element:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.
• Native event listeners.

Center writes its own data-axis on the root element to reflect the axis in effect; a data-axis passed in by a consumer does not replace it.