Center

Centers content horizontally, vertically, or both.

Examples

Basic

Centered content

<Center {...args} className={containerStyle}>
  <Text type="body">Centered content</Text>
</Center>

Horizontal

Centered horizontally

<Center {...args} className={containerStyle}>
  <Text type="body">Centered horizontally</Text>
</Center>

Vertical

Centered vertically

<Center {...args} className={containerStyle}>
  <Text type="body">Centered vertically</Text>
</Center>

Inline

Before

Inline centered

After

<Text as="p" type="body">
  Before{' '}
  <Center axis="both" height={48} isInline width={160}>
    <Text type="supporting">Inline centered</Text>
  </Center>{' '}
  After
</Text>

Explicit Size

200 × 120

50% × 8rem

<HStack gap={4}>
  <Center className={containerStyle} height={120} width={200}>
    <Text type="body">200 × 120</Text>
  </Center>
  <Center className={containerStyle} height="8rem" width="50%">
    <Text type="body">50% × 8rem</Text>
  </Center>
</HStack>

Inside Stack

Above

Fills remaining space

Below

<VStack gap={4} height={300}>
  <Card>
    <Text type="body">Above</Text>
  </Card>
  <Center className={containerStyle} style={{flex: 1}}>
    <Text type="body">Fills remaining space</Text>
  </Center>
  <Card>
    <Text type="body">Below</Text>
  </Card>
</VStack>

Fills Parent

Fills parent dimensions

<div className={containerStyle} style={{height: 200}}>
  <Center height="100%" width="100%">
    <Text type="body">Fills parent dimensions</Text>
  </Center>
</div>

API

Center

Prop	Type	Default	Description
axis	"horizontal" | "vertical" | "both"	—	Which axes to center content along.
children*	ReactNode	—	Content to center.
data-testid	string	—	Test ID applied to the root element.
height	SizeValue	—	Fixed height. Numbers are treated as pixels.
isInline	boolean	—	Render as inline-flex instead of flex.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
width	SizeValue	—	Fixed width. Numbers are treated as pixels.