O mixin centerPosition é utilizado para centralizar um elemento horizontalmente, verticalmente ou em ambos os sentidos. Ele oferece flexibilidade ao definir o tipo de centralização desejado, como absolute, relative, sticky ou fixed.

Parâmetros

• $direction: O sentido da centralização. Pode ser:
  • 'H': Centralização horizontal.
  • 'V': Centralização vertical.
  • 'C': Centralização em ambos os sentidos.
• $type: O tipo de posicionamento. Pode ser:
  • 'absolute': Posicionamento absoluto.
  • 'relative': Posicionamento relativo.
  • 'fixed': Posicionamento fixo.
  • 'sticky': Posicionamento ‘sticky’.

Uso

.element {
    @include centerPosition('H', 'absolute');
}

.element {
    @include centerPosition('V', 'relative');
}

.element {
    @include centerPosition('C', 'fixed');
}

Exemplo de Saída

.element {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}