AbsoluteCenter

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

Source: packages/chakra-ui-solid/src/components/absolute-centerChakra UI ↗

Centered Content

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

export default function AbsoluteCenterBasic() {
  return (
    <Box position="relative" h="100px" bg="bg.muted" borderRadius="md">
      <AbsoluteCenter>
        <Box bg="bg.emphasized" px="4" py="2" borderRadius="md" color="fg">
          Centered Content
        </Box>
      </AbsoluteCenter>
    </Box>
  );
}

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

import { AbsoluteCenter, Box, VStack } from "chakra-ui-solid";
import { For } from "solid-js";

const axes = ["horizontal", "vertical", "both"] as const;

export default function AbsoluteCenterWithAxis() {
  return (
    <VStack gap="6" align="stretch">
      <For each={axes}>
        {(axis) => (
          <VStack gap="2">
            <Box as="p" fontWeight="medium">{`<AbsoluteCenter axis="${axis}" />`}</Box>
            <Box position="relative" h="80px" outline="1px solid red">
              <AbsoluteCenter axis={axis}>
                <Box bg="blue.solid" px="3" py="1" borderRadius="sm" color="white">
                  {axis}
                </Box>
              </AbsoluteCenter>
            </Box>
          </VStack>
        )}
      </For>
    </VStack>
  );
}

With Content

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

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

const Dot = () => (
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <circle cx="12" cy="12" r="6" fill="currentColor" />
  </svg>
);

export default function AbsoluteCenterWithContent() {
  return (
    <Box position="relative" w="100px" h="100px" bg="bg.muted" borderRadius="md">
      <AbsoluteCenter>
        <Box bg="red.solid" color="red.contrast" p="3" borderRadius="full" fontSize="xl">
          <Dot />
        </Box>
      </AbsoluteCenter>
    </Box>
  );
}

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

import { AbsoluteCenter, Box, Circle, HStack } from "chakra-ui-solid";

const Overlay = () => (
  <AbsoluteCenter bg="bg/80" backdropFilter="blur(2px)" rounded="md" p="4">
    <HStack gap="3">
      <Circle size="4" borderWidth="2px" borderColor="blue.solid" borderTopColor="transparent" />
      <Box as="p" fontSize="sm" color="fg.muted">
        Loading...
      </Box>
    </HStack>
  </AbsoluteCenter>
);

export default function AbsoluteCenterWithOverlay() {
  return (
    <Box position="relative" h="120px" bg="bg.muted" rounded="md" p="10">
      <Box opacity="0.5" aria-busy="true">
        Some content that is being loaded...
      </Box>
      <Overlay />
    </Box>
  );
}

RTL Support

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

RTL (horizontal)

البداية

RTL (vertical)

البداية

RTL (both)

البداية

import { AbsoluteCenter, Box, HStack, Span, VStack } from "chakra-ui-solid";
import { For } from "solid-js";

const axes = ["horizontal", "vertical", "both"] as const;

export default function AbsoluteCenterWithRtl() {
  return (
    <VStack gap="6" align="stretch">
      <For each={axes}>
        {(axis) => (
          <VStack gap="2" dir="rtl">
            <Box as="p" fontWeight="medium">
              RTL ({axis})
            </Box>
            <Box
              position="relative"
              h="100px"
              bg="bg.muted"
              borderRadius="md"
              outline="1px solid red"
            >
              <AbsoluteCenter axis={axis}>
                <HStack bg="green.solid" color="white" px="4" py="2" borderRadius="md" gap="2">
                  <Span>البداية</Span>
                </HStack>
              </AbsoluteCenter>
            </Box>
          </VStack>
        )}
      </For>
    </VStack>
  );
}

Props

Prop	Default	Type
`as`	—	`ValidComponent` The element or component to render instead of the default one.
`render`	—	`(props) => JSX.Element` Render an element of your own, given the computed props. A function, never an element — Solid has no `cloneElement`, so an element could only be rendered with its props dropped.
`unstyled`	—	`boolean` Drop the component's own styles. Style props and the `css` prop still apply — the opt-out is of the theme, not of styling.

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.