Em apenas 3 linhas podemos centralizar verticalmente um elemento.

HTML:

<div id="parent">
    <div id="children"></div>
</div>

CSS

#parent {
    height: 400px;
    transform-style: preserve-3d;
}

#children {
    position: relative;
    height: 200px;
    top: 50%;
    transform: translateY(-50%);
}

A chave está ligada …

Use no #childrenelemento translateY(-50%)com top: 50%e #parentusandopreserve-3d

Código funcionando em: http://jsfiddle.net/alvaroveliz/wbz6dewd/