Center

Used to center its child within itself.

This will be centered

Usage

import { Center, Circle, Square } from "chakra-ui-solid";

<Center bg="tomato" h="100px" color="white">
  This is the Center
</Center>

Examples

Icon

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

Center with Inline

Use the inline prop to make Center behave like an inline element (display: inline-flex) instead of a block-level element (display: flex). This makes Center only take up as much width as its content needs, allowing it to fit inside links, buttons, or other inline contexts without breaking the layout.

Visit chakra-ui-solid

Square

Square centers its child within a fixed-size container of equal width and height. It accepts a size prop that sets both width and height to the same value.

Circle

Circle extends Square by adding borderRadius="9999px" to create a perfect circle. Like Square, it accepts a size prop that sets both width and height to the same value.

Props

Center

CenterProps

Adds no prop of its own. It takes the three every component takes: as, render and unstyled.

inline is a recipe variant rather than a member of that interface, so it does not appear in the table: pass it to switch display from flex to inline-flex.

Square

SquareProps
Prop	Default	Type
`size`	—	`SystemProperties['width']` The width and height of the square — one value for both, taking whatever `width` takes.

Plus Omit<HTMLChakraProps<"div">, "size"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

Circle

Circle extends Square and accepts all the same props. The only difference is that Circle applies borderRadius="9999px".

CircleProps
Prop	Default	Type
`size`	—	`SystemProperties['width']` The width and height of the square — one value for both, taking whatever `width` takes.