--- id: center category: layout title: Center package: '@chakra-ui/layout' description: Center is a layout component that centers its child within itself. --- ## Import ```js import { Center, Square, Circle } from '@chakra-ui/react' ``` - **Center:** centers its child given `width` and `height` - **Square:** centers its child given `size` (width and height) - **Circle:** a `Square` with round `border-radius` - **AbsoluteCenter:** centers relative to its parent by given `axis` ## Usage Put any child element inside it, give it any `width` or/and `height`, it'll ensure the child is centered. ```jsx This is the Center ``` ### With icons Center can be used to create frames around icons or numbers. ```jsx 1 ``` ### Square and Circle To reduce boilerplate, we've exported `Square` and `Circle` components that automatically centers its children given the `size`. ```jsx ``` ### AbsoluteCenter Used to horizontally and vertically center an element relative to its parent dimensions. Uses the `position: absolute` strategy. Takes `axis` prop which is could be "both" (by default), "horizontal" or "vertical". ```jsx ```