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
andheight
- Square: centers its child given
size
(width and height) - Circle: a
Square
with roundborder-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.