Teste de centralização vertical

Position

Com a propriedade position podemos ajustar precisamente onde a caixa vai estar. Possui valores absolute e relative(padrão), com o absolute podemos configurar a posição da caixa com os atributos left e top.

A regra é simples, a caixa externa fica com o valor relative, enquanto a caixa interna fica com o valor absolute.

Left é a distância esquerda da caixa interna até a caixa externa, e top é a distância do topo da caixa interna até a caixa externa. Nesta caixa abaixo, eu utilizei um left de 300px e top de 140px.

Aqui, um left de 200px e top de 100px.

Use o DevTools para configurar o left e top para vê-lo em tempo real.

left: 510px; top: 10px

left: 50%;top: 50%;

Com a propriedade transform podemos aplicar alterações de transformação em nossas caixas, como por exemplo, rotacionar, aumentar e diminuir com scale(), etc. O que a gente vai ver é o traslate()(translação), aceitando dois valores, primeiro move para a esquerda e direita depedendo do sinal do número, se for positivo move na direita se negativo para a esquerda, o segundo move para o topo se - move para cima se + para baixo

top: 50%; left: 50%; transform: translate(-50%,-50%);