Introducción

Un componente contenedor de utilidad que centra sus elementos hijos de forma absoluta dentro de su contenedor padre posicionado relativamente más cercano. Excelente para contenido superpuesto, esqueletos de carga, insignias fijadas en el centro, tarjetas de llamada y resaltados de banner de aterrizaje.

El componente AbsoluteCenter está totalmente integrado como un bloque absoluteCenter en el Page Builder, lo que permite a los autores de contenido y desarrolladores configurar fácilmente diseños visuales, ejes de alineación y comportamientos de espaciado directamente dentro del CMS.

Uso

Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran contenedores absolutos centrados.

1. Centrado en ambos ejes

Centra los elementos anidados perfectamente de forma horizontal y vertical dentro del contexto padre. Ideal para insignias de llamada a la acción centralizadas o superposiciones de carga de progreso.

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

2. Alineación solo horizontal

Fija los elementos para centrarlos horizontalmente (a lo largo del eje X) dejando la posición vertical sin modificar.

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

3. Alineación solo vertical

Fija los elementos para centrarlos verticalmente (a lo largo del eje Y) dejando la posición horizontal sin modificar.

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

Propiedades

Notas para desarrolladores y accesibilidad

• Objetivo de padre relativo: Para que AbsoluteCenter funcione correctamente, su contenedor padre inmediato o envoltura de diseño debe tener position: relative (u otro posicionamiento no estático) aplicado.
• Posicionamiento acelerado por hardware: En segundo plano, este componente usa reglas de transformación CSS de alta eficiencia (transform: translate(-50%, -50%)) para evitar cualquier desenfoque de renderizado sub-píxel o problemas de escalado de fuentes en diferentes densidades de píxeles de pantalla.
• Orden de árbol accesible: El componente mantiene el orden de lectura DOM nativo para lectores de pantalla. No altera las pestañas de navegación por teclado ni los resaltados de esquema de accesibilidad del contenido hijo interno.