Position absolute centralizado vertical e horizontal

Solução para design responsivo ou dimensões desconhecidas se você não precisa dar suporte para IE8 e anteriores.

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

O truque é, top e left são relativos ao elemento pai enquanto transform translate é relativo a largura e a altura dos elementos.

Dessa forma você tem um elemento perfeitamente centralizado, na horizontal e vertical com largura e altura flexível.

Para centralizar apenas na horizontal:

.absolute-hcenter {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

Ou apenas na vertical:

.absolute-vcenter {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

You may also like...