# Offset As classes utilitárias de offsets no **WPF** permitem ajustar a posição de elementos com as propriedades CSS top, right, bottom e left. Elas são projetadas para serem intuitivas, seguindo uma sintaxe clara e flexível, compatível com unidades como `%`, `px`, `dvh` e `dvw`. ### Como Funcionam as Classes de Offsets As classes de offsets seguem o padrão: (propriedade)(valor)(unidade), onde: - **Propriedade**: `top`, `right`, `bottom` ou `left`. - **Valor**: Um número inteiro (positivo ou negativo) que define o deslocamento. - **Unidade**: Opcional, pode ser `%`, `px`, `dvh` (altura dinâmica da viewport) e `dvw` (largura dinâmica da viewport). Se omitida, o valor é tratado como unitless (ex.: `top(10)` equivale a `top: 10;`). Isso significa que uma classe válida segue este formato: ```html
``` ### Usando Funções de Classe para Centralização As classes utilitárias de centralização do **WPF** simplificam o alinhamento de elementos horizontalmente, verticalmente ou em ambos os eixos. Elas combinam as propriedades left, top e transform para posicionar elementos com precisão, especialmente em elementos com position: `absolute`, `fixed` ou `sticky`. #### Como Funcionam as Classes de Centralização As classes de centralização seguem uma sintaxe simples e intuitiva: **center(tipo)**, onde o tipo define o eixo de centralização: As classes de centralização **são ideais para elementos com** **position:** `absolute`, `fixed` ou `sticky`, **dentro ou fora de um contêiner pai com** **position semelhante**. Certifique-se de que o elemento pai tenha dimensões definidas de alguma maneira (ex.: width e height) para que a centralização funcione corretamente.
Classe Utilitária Comportamento
`center(h)`*Centraliza horizontalmente o elemento.*
`center(v)`*Centraliza verticalmente o elemento.*
`center(c)`*Centraliza em **ambos** os eixos (horizontal e vertical).*
Com essa sintaxe, confira alguns exemplos dessas funções de classe em execução: ```html
``` ### Notas

**Posicionamento**: As classes de centralização requerem que o elemento tenha position: `absolute`, `fixed` ou `sticky`.

**Contêiner Pai**: Certifique-se de que o elemento pai tenha algum atributo position não estático e dimensões definidas de alguma maneira.

**Transformações Adicionais**: Certifique-se que, ao usar outros tipos de **configurações de transformação**, que elas não sobrescrevam os seus estilos!