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:
In this example, the Center component is used to center some simple text on both axes.
Square and Circle
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3
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.