Center

Center is a layout component that centers its child within itself.

chakra ui pro

Import#

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

Usage#

Put any child element inside it, give it any width or/and height, it'll ensure the child is centered.

<Center bg="tomato" h="100px" color="white">
This is the Center
</Center>

With icons#

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

<HStack>
<Center w="40px" h="40px" bg="tomato" color="white">
<PhoneIcon />
</Center>
<Center w="40px" h="40px" bg="tomato" color="white">
<Box as="span" fontWeight="bold" fontSize="lg">
1
</Box>
</Center>
</HStack>

Square and Circle#

To reduce boilerplate, we've exported Square and Circle components that automatically centers its children given the size.

<HStack>
<Circle size="40px" bg="tomato" color="white">
<PhoneIcon />
</Circle>
<Square size="40px" bg="purple.700" color="white">
<PhoneIcon />
</Square>
</HStack>
Edit this page

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel