Oi Nícolas tudo bem?

a propriedade "vertical-align" aplica-se perfeitamente em tables, mas não servem para o seu propósito.

Por quê você não utiliza flexbox? Com 3 propriedades CSS você consegue alcançar o objetivo...

Fiz uma versão do JSFiddle utilizando flexbox, olha como é simples :)

display: flex;

Declara que o elemento (no caso a div wrapper) será do tipo flexbox

justify-content: center;

Alinha os filhos na horizontal

align-items: center;

Alinha os filhos na vertical (assim como o vertical-align para table)

:)

a propriedade "vertical-align" aplica-se perfeitamente em tables, mas não servem para o seu propósito.

Então, eu n entendi muito bem como ela funciona sem ser em tables, quando utilizar essas coisas :/.

@Edit

Acabei de pesquisar mais sobre o assunto, descobri sobre o funcionamento dela no Developer Mozilla , apesar de eu preferir o w3schools o dev mozilla tem a informação mais completa.

De qualquer forma, obrigado pela resposta meu chará ^^, o flexbox ele é bom porem não funciona em navegadores antigos, na minha cabeça, o vertical-align seria mais uma possível solução de alinhar elementos verticalmente compatível com navegadores antigos.

Nícolas, Alterando o display da div você consegue utilizar o vertical-align

Exemplo: https://jsfiddle.net/7ycshsc4/6/

Obrigado pela resposta Vergara =), ajudou.