AbsoluteCenter

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/react"

<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).

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.

RTL Support

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

Props