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/