In just 3 lines we can center vertically an element.

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%);
}

The key is on...

Use in the #children element translateY(-50%) with top: 50% and #parent using preserve-3d

Code working on: http://jsfiddle.net/alvaroveliz/wbz6dewd/