AbsoluteCenter

Used to horizontally and vertically center an element relative to its parent dimensions using absolute positioning.

Centered Content

Usage

The AbsoluteCenter component uses the position: absolute strategy to center its child element relative to its parent.

The parent element must have position: relative for proper positioning.

import { AbsoluteCenter } from "chakra-ui-solid";

<Box position="relative" h="100px">
  <AbsoluteCenter>Centered Content</AbsoluteCenter>
</Box>

Examples

Axis Control

Control which axis to center on using the axis prop. Options are horizontal, vertical, or both (default).

horizontal

vertical

both

With Content

Use AbsoluteCenter with various content types like icons, badges, and status indicators.

Overlay Usage

Perfect for creating loading overlays or modal-like content that needs to be centered over existing content.

Some content that is being loaded...

RTL Support

AbsoluteCenter automatically handles right-to-left (RTL) layouts by adjusting the horizontal positioning and transforms appropriately.

RTL (horizontal)

البداية

RTL (vertical)

البداية

RTL (both)

البداية

Props

AbsoluteCenterProps

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

axis is a recipe variant rather than a member of that interface, so it does not appear in the table: it takes horizontal, vertical or both, and defaults to both.