Chakra-UI

I♥️Components

Center

|

Chakra Docs

|

⦾ The Center component in Chakra UI is a powerful layout component that allows you to effortlessly center its child elements, thus conveniently providing a simple and efficient way to achieve centralized alignment in your UI designs. It is a wrapper component that accepts a single child element and centers it within the parent container.

  • Center: centers its child element based on the specified width and height. It ensures that the child is perfectly aligned both horizontally and vertically within the Center component
  • Square: a simplified version of the Center component that centers its child element based on a specified size, which represents both the width and height of the square. It ensures that the child is perfectly centered within the square shape.
  • Circle: a variation of the Square component, but with a rounded border-radius, creating a circular shape. It centers its child element within the circular shape.
  • AbsoluteCenter: centers its child element relative to its parent's dimensions. It uses the "position: absolute" strategy to achieve the desired centering effect. You can specify the axis (both, horizontal, or vertical) to control the direction of centering.

These components can be imported as follows:

Examples

Center

⦾ The Center component is the core of the centering capabilities in Chakra UI. It centers its child element both horizontally and vertically within itself. You can specify the width and height of the Center component to accommodate your design needs.

In this example, the Center component is used to center some simple text on both axes.

The Center.

Code

Square and Circle

⦾ To simplify the process of achieving a perfect centering of child elements, such as icons, Chakra UI provides the Square and Circle components. The Square component centers its child element based on a specified size. The Circle component is simply a rounded Square.

Code

AbsoluteCenter

⦾ The AbsoluteCenter component is used to center an element horizontally and vertically relative to its parent's dimensions. It employs the "position: absolute" strategy. You can control the axis of centering using the axis prop, which can be set to "both" (default), "horizontal," or "vertical."

Code

Did you know?

Creative Idea No. 1

Animated Squares: In this example, we explore using the Chakra UI Center and Square components to create an interactive animation effect. This type of animation could be the basis for many different types of UI interactions, such as a loading screen or a button animation.

Code

Creative Idea No. 2

Animated Loading Circle: You can create an animated loading circle using the Circle component. This can be a visually appealing way to indicate a loading state to users. In this example, we use the Circle component to create a loading circle that spins continuously with the flower icon inside. This could serve as a fancier version of the traditional loading spinner.
Loading...

Code

Creative Idea No. 3

Button Highlight: In this example, we use the Button component to create a button that is highlighted by a Circle component when the user hovers over it. This is a simple way to add a bit of interactivity to your UI designs. The borderRadius on the Circle component is set at borderRadius="50% / 30% 70%" to create a bit and ellipse shape. And the opacity of its color is set at opacity="0.7" to create a slightly more subtle highlight effect.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.