Einführung

Eine Hilfs-Container-Komponente, die ihre Kindelemente absolut innerhalb ihres nächsten relativ positionierten Elterncontainers zentriert. Hervorragend geeignet für Overlay-Inhalte, Lade-Skelette, mittig angeheftete Badges, Callout-Karten und Landing-Banner-Highlights.

Die AbsoluteCenter-Komponente ist als absoluteCenter-Block vollständig im Page Builder integriert und erlaubt es Content-Autoren und Entwicklern, visuelle Layouts, Ausrichtungsachsen und Abstände direkt im CMS zu konfigurieren.

Verwendung

Diese Beispiele veranschaulichen, wie Content-Editoren zentrierte absolute Container binden und strukturieren.

1. Zentrierung auf beiden Achsen

Zentriert verschachtelte Elemente perfekt horizontal und vertikal innerhalb des Elternkontexts. Ideal für zentralisierte Call-to-Action-Badges oder Fortschrittslade-Overlays.

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

2. Nur horizontale Ausrichtung

Heftet die Elemente zur horizontalen Zentrierung (entlang der X-Achse) fest, während die vertikale Position unverändert bleibt.

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

3. Nur vertikale Ausrichtung

Heftet die Elemente zur vertikalen Zentrierung (entlang der Y-Achse) fest, während die horizontale Position unverändert bleibt.

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

Eigenschaften

Entwickler-Hinweise & Barrierefreiheit

• Relatives Elternziel: Damit AbsoluteCenter korrekt funktioniert, muss sein unmittelbarer Elterncontainer oder Layout-Wrapper position: relative (oder eine andere nicht-statische Positionierung) besitzen.
• Hardware-beschleunigte Positionierung: Im Hintergrund verwendet diese Komponente hocheffiziente CSS-Transformationsregeln (transform: translate(-50%, -50%)), um Subpixel-Render-Unschärfe oder Schrift-Skalierungsprobleme über verschiedene Bildschirm-Pixeldichten hinweg zu vermeiden.
• Zugängliche Baum-Reihenfolge: Die Komponente behält die native DOM-Lesereihenfolge für Screenreader bei. Sie verändert weder die Tastaturnavigations-Tabs noch die Barrierefreiheits-Konturhervorhebungen des inneren Kindschaftsinhalts.