Center

Renders a flex container that centers its children both horizontally and vertically. Use inline to make it flow inline with surrounding content.

Default

Centered content

<Center style="height:120px">
  <Text>Centered content</Text>
</Center>

Inline

Text before inline center text after

<Text>
  Text before <Center inline><span>inline center</span></Center> text after
</Text>

As a different element

Rendered as <section>

<Center component="section" style="height:80px">
  <Text>Rendered as &lt;section&gt;</Text>
</Center>

Props

PropTypeDefaultDescription
inlinebooleanfalseRenders as inline-flex instead of flex
componentstring'div'HTML element to render as the root node
classstring—Additional CSS class names
styleobject—Inline styles
childrenReactNode—Content to center