Porque Precisamos do Transform:Translate(-25%) para Centralizar Um Elemento Posicionado Absolutamente

Muitos programadores de desenvolvimento web tem essa dúvida do motivo de se usar Transform: TranslateX(-25%) e/ou Transform: TranslateY(-25%) depois de se posicionar um elemento no modo absoluto.

O display: absolute tem suas peculiaridades e essa e uma delas. Acompanhe pelas figuras:

1) Você tem um elemento como o body e quer posicionar um outro elemento exatamente no meio deste:

2) Um div por exemplo:

3) Intuitivamente parece que simplesmente usando
display: absolute;
top: 50%;
left: 50%;
já seria suficiente mas não é o que ocorre.

4) Isso acontece porque o elemento é posicionado de acordo com seu canto superior esquerdo. Não o seu centro:

5) Assim você usa o translate para compensar metade do tamanho do elemento para posicionar de maneira adequada. 100%-50%=50%.
top: 50%; (metade do elemento pai, neste caso o body, na altura)
transform: translateY(-50%); (movendo metade do elemento filho, o div, para cima)
left: 50%; (metade da largura do body)
transform: translateY(-50%); (movendo metade do elemento filho, o div, para esquerda)

Assim você centraliza o elemento como queria no início com quatro linhas de CSS.