Center

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

    Source@chakra-ui/layout

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
  • 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.

<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>

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".

<Box position='relative' h='100px'>
<AbsoluteCenter bg='tomato' p='4' color='white' axis='both'>
<PhoneIcon />
</AbsoluteCenter>
</Box>

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel