Introdução

Um componente contêiner utilitário que centraliza seus elementos filhos de forma absoluta dentro de seu contêiner pai posicionado relativamente mais próximo. Excelente para conteúdo sobreposto, esqueletos de carregamento, badges fixados no centro, cartões de destaque e realces de banner de landing.

O componente AbsoluteCenter está totalmente integrado como um bloco absoluteCenter no Page Builder, permitindo que autores de conteúdo e desenvolvedores configurem facilmente layouts visuais, eixos de alinhamento e comportamentos de espaçamento diretamente no CMS.

Uso

Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam contêineres absolutos centralizados.

1. Centralização em ambos os eixos

Centraliza os elementos aninhados perfeitamente de forma horizontal e vertical dentro do contexto pai. Ideal para badges de call-to-action centralizados ou sobreposições de carregamento de progresso.

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

2. Alinhamento apenas horizontal

Fixa os elementos para centralizá-los horizontalmente (ao longo do eixo X), mantendo a posição vertical inalterada.

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

3. Alinhamento apenas vertical

Fixa os elementos para centralizá-los verticalmente (ao longo do eixo Y), mantendo a posição horizontal inalterada.

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

Propriedades

Notas de desenvolvimento e acessibilidade

• Alvo de pai relativo: Para que o AbsoluteCenter funcione corretamente, seu contêiner pai imediato ou wrapper de layout deve ter position: relative (ou outro posicionamento não estático) aplicado.
• Posicionamento acelerado por hardware: Nos bastidores, este componente usa regras de tradução CSS de alta eficiência (transform: translate(-50%, -50%)) para evitar qualquer desfoque de renderização subpixel ou problemas de escala de fonte em diferentes densidades de pixels de tela.
• Ordenação de árvore acessível: O componente mantém a ordem de leitura DOM nativa para leitores de tela. Ele não altera as abas de navegação por teclado nem os realces de contorno de acessibilidade do conteúdo filho interno.