A utility container component that centers its child elements absolutely inside its nearest relative-positioned parent container. Excellent for overlay content, loading skeletons, center-pinned badges, callout cards, and landing banner highlights.

The AbsoluteCenter component is fully integrated as an absoluteCenter block in the Page Builder, allowing content authors and developers to easily configure visual layouts, alignment axes, and spacing behaviors directly within the CMS.

Usage

These examples illustrate how content editors bind and structure center-aligned absolute containers.

1. Centering on Both Axes

Centers nested elements perfectly horizontally and vertically within the parent context. Ideal for centralised call-to-action badges or progress loader overlays.

{
  "type": "absoluteCenter",
  "axis": "both",
  "children": [
    {
      "type": "badge",
      "text": "Centered Content",
      "colorPalette": "purple",
      "variant": "solid"
    }
  ]
}

2. Horizontal-Only Alignment

Pins the elements to center-align horizontally (along the X-axis) while leaving the vertical position unmodified.

{
  "type": "absoluteCenter",
  "axis": "horizontal",
  "children": [
    {
      "type": "badge",
      "text": "Horizontal Only",
      "colorPalette": "blue",
      "variant": "outline"
    }
  ]
}

3. Vertical-Only Alignment

Pins the elements to center-align vertically (along the Y-axis) while leaving the horizontal position unmodified.

{
  "type": "absoluteCenter",
  "axis": "vertical",
  "children": [
    {
      "type": "badge",
      "text": "Vertical Only",
      "colorPalette": "green",
      "variant": "subtle"
    }
  ]
}

Props

Developer Notes & Accessibility

• Relative Parent Target: For AbsoluteCenter to function correctly, its immediate parent container or layout wrapper must have position: relative (or other non-static positioning) applied.
• Hardware-Accelerated Positioning: Under the hood, this component uses high-efficiency CSS translation rules (transform: translate(-50%, -50%)) to prevent any sub-pixel rendering blur or font-scaling issues across varying screen pixel densities.
• Accessible Tree Ordering: The component maintains the native DOM sequential reading order for screen readers. It does not alter keyboard navigation tabs or accessibility outline highlights of its inner child content.