AbsoluteCenter

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

AI TipWant to skip the docs? Use the MCP Server

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

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

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

horizontal

vertical

both

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

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

Some content that is being loaded...

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

RTL (horizontal)

البداية

RTL (vertical)

البداية

RTL (both)

البداية

Prop	Default	Type
`axis`		`'horizontal' \| 'vertical' \| 'both' \| undefined`
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.