Center

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

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