Por que usar o "transform: translate(-50%, -50%)"

Então, a partir do momento em que utilizamos position: absolute, a "âncora" , ou a sua referência de posicionamento, deixa de ser o ponto central do elemento.

.banner__titulo{
    position: absolute; 
    left: 50%; 
    top: 50%; 
    text-align: center; 
    transform: translate(-50%, -50%);
    width: 100%; 
}

Neste caso, quando usamos as propriedades de top e left para deslocá-lo, ele se move 50% do topo e 50% do lado esquerda, a referencia, por assim dizer, está no ponto superior esquerdo.

Para corrigir isso, é preciso utilizar a propriedade transform com a função translate para deslocar o elemento 50% do seu tamanho para esquerda e 50% de sua altura para o topo, a fim de centralizá-lo.

Ahh, eu li e comnpreendi mais ou menos ksks, fiz alguns testes com uma div com fundo preto para ver como ele se molda conforme as mudanças no css, e de fato agora compreendo, obrigado!!