Center

Usage

import { 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.

Center with Inline

Use the inline prop to make Center behave like an inline element (display: inline-flex) instead of a block-level element (display: flex). This makes Center only take up as much width as its content needs, allowing it to fit inside links, buttons, or other inline contexts without breaking the layout.

Square

Square centers its child within a fixed-size container of equal width and height. It accepts a size prop that sets both width and height to the same value.

Circle

Circle extends Square by adding borderRadius="9999px" to create a perfect circle. Like Square, it accepts a size prop that sets both width and height to the same value.

Props

Center

Square

Circle

Circle extends Square and accepts all the same props. The only difference is that Circle applies borderRadius="9999px".