Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundEnterpriseBlog
Sponsor

Center

Used to center its child within itself.

SourceStorybook
This will be centered

Usage

import { AbsoluteCenter, Center, Circle, Square } from "@chakra-ui/react"
<Center bg="tomato" h="100px" color="white">
  This is the Center
</Center>

Examples

Icon

Center can be used to create frames around icons or numbers.

1

Center with Inline

Use the inline to change the display to inline-flex.

Visit Chakra UI

Square

Square centers its child given the size (width and height).

Circle

Circle centers its child given the size and creates a circle around it.

AbsoluteCenter

AbsoluteCenter centers relative to its parent using the position: absolute strategy. Pass the axis prop to change the axis of alignment.

Props

AbsoluteCenter

PropDefaultType
axis
'horizontal' | 'vertical' | 'both'

Previous

Box

Next

Container