Center

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

View 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

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>

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

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

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

Props

Center inherits all props from the Box component.