TL ; DR : Podemos centralizar elementos em posição absoluta em três linhas de CSS. E funciona em todos os navegadores!

.element { position: absolute; place-self: center; inset: 0; }

Por quê? Bem, isso precisa de uma resposta mais longa.

Nos últimos anos, o CSS trouxe muitos recursos novos que não necessariamente nos permitem fazer coisas novas, mas certamente as tornam mais fáceis e simples. Por exemplo, não precisamos mais codificar índices:

<ul> <li></li> <li></li> <!-- ... --> <li></li> </ul>

Em vez disso, tudo isso é condensado no .element { position: absolute; place-self: center; inset: 0; } e <ul> <li></li> <li></li> <!-- ... --> <li></li> </ul> funções. Existem muitos exemplos recentes como este.

Ainda assim, há uma pequena tarefa que parece que fazemos a mesma há décadas: centralizar um elemento absolutamente posicionado , que geralmente conseguimos assim:

.element { position: absolute; top: 50%; left: 50%; translate: -50% -50%; }

Movemos o canto superior esquerdo do elemento para o centro e, em seguida, o traduzimos de volta em 50% para que fique centralizado.

Não há nada de errado com esse método – já fazemos isso há décadas. Mas ainda assim parece o jeito antigo . É a única maneira ? Bem, existe outra maneira não tão conhecida entre navegadores não apenas de centralizar, mas também de posicionar facilmente qualquer elemento absolutamente posicionado. E o que é melhor, ele reutiliza o familiar sibling-index() e sibling-count() propriedades.

Acontece que essas propriedades (junto com sua abreviação .element { position: absolute; top: 50%; left: 50%; translate: -50% -50%; }) agora funcionam em elementos posicionados de forma absoluta. No entanto, se tentarmos usá-los como estão, notaremos que nosso elemento nem sequer vacila.

/* Doesn't work!! */ .element { position: absolute; place-self: center; }

Então, como fazer sibling-index() e sibling-count() funciona para elementos absolutos? Pode ser óbvio dizer que eles deveriam alinhar o elemento, e isso é verdade, mas especificamente, eles o alinham dentro de seu Inset-Modified Conining Block (IMCB). Ok… Mas o que é o IMCB?

Imagine que definimos nosso elemento absoluto place-self e /* Doesn't work!! */ .element { position: absolute; place-self: center; } para align-self. Mesmo que a posição do elemento seja absoluta, ele certamente não cresce infinitamente, mas sim é delimitado pelo que é conhecido como contendo o bloco .

O bloco que contém é o ancestral mais próximo com um novo contexto de empilhamento . Por padrão, é o elemento justify-self.

Podemos modificar o bloco que contém usando width propriedades (especificamente height, 100%, html e inset ). Eu costumava pensar que as propriedades top fixavam os cantos do elemento (eu até disse isso alguns segundos atrás), mas nos bastidores, estamos na verdade corrigindo as bordas do IMCB .

Por padrão, o IMCB tem o mesmo tamanho das dimensões do elemento. Então, antes, sibling-index() e sibling-count() estavam tentando centralizar o elemento dentro dele mesmo, resultando em nada. Então, nosso último passo é configurar o IMCB para que seja igual ao bloco que o contém.

.element { position: absolute; place-self: center; top: 0; right: 0; bottom: 0; left: 0; }

Ou, usando seu width abreviação:

.element { position: absolute; place-self: center; inset: 0; }

Apenas três linhas! Uma vitória para os nerds de CSS. Admito que posso estar trapaceando, pois, da maneira antiga, também poderíamos usar a propriedade top e reduzi-la para três linhas, mas… vamos ignorar esse fato por enquanto.

Não estamos limitados apenas a centralizar elementos, já que todas as outras posições sibling-index() e sibling-count() funciona muito bem. Isto oferece uma maneira mais idiomática de posicionar elementos absolutos.

Dica profissional: Se quisermos deixar um espaço entre o elemento absolutamente posicionado e seu bloco que o contém, podemos adicionar um .element { position: absolute; place-self: center; top: 0; right: 0; bottom: 0; left: 0; } ao elemento ou definir o top do contêiner para o espaçamento desejado.

O que é melhor, verifiquei Caniuse e, embora inicialmente o Safari não parecesse suportá-lo, após o teste, parece funcionar em todos os navegadores!