Alinhamento vertical CSS3

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/