Skip to main content

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.

With icons

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

Square and Circle

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

Props

Center inherits all props from the Box component.