Navegar componentes

Center

LayoutExemplo

Center alinha o conteúdo ao centro de seu contêiner. Use para estados vazios, telas de carregamento, formulários de login ou qualquer conteúdo que deva ficar no centro do espaço disponível.

Importação

import {Center} from '@pharos-ds/core/Center';

Exemplos

Área interativa

axis

isInline

Centralizado

Código

import {Center} from '@pharos-ds/core/Center';

<Center
  axis="both"
  isInline={false}
 />

Boas práticas

Faça: Use axis="horizontal" ou axis="vertical" quando precisar centralizar em apenas uma direção. Ambos os eixos é o padrão, mas nem sempre é necessário.
Faça: Defina uma height ao centralizar verticalmente. Center precisa de uma altura definida para saber em qual espaço centralizar.
Faça: Use isInline para centralizar elementos pequenos como ícones ou badges dentro de uma linha de texto sem quebrar o fluxo do texto.
Evite: Envolva grandes seções de página em Center. Use Layout ou AppShell para estrutura em nível de página.
Evite: Use Center para listas horizontais de itens. Use Stack com hAlign="center" em vez disso.

Props

Prop	Tipo	Padrão	Descrição
`axis`	`'both' \| 'horizontal' \| 'vertical'`	`'both'`	Qual(is) direção(ões) centralizar.
`width`	`SizeValue`	—	Largura do contêiner (px ou valor CSS).
`height`	`SizeValue`	—	Altura do contêiner (px ou valor CSS).
`maxWidth`	`SizeValue`	—	Largura máxima do contêiner (px ou valor CSS).
`minHeight`	`SizeValue`	—	Altura mínima do contêiner (px ou valor CSS).
`isInline`	`boolean`	`false`	Usa inline-flex (útil para texto/ícones).
`children`	`ReactNode`	—	Conteúdo a centralizar.
`xstyle`	`StyleXStyles`	—	Estilos StyleX para personalização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(), não um objeto de estilo inline como style={{}}.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/Center