css - 絶対配置アイテムを垂直方向に中央揃えする方法は?

Question

絶対配置のdivを揃えたいです。上:50%、下:50% が機能していません。これに対する解決策は何ですか?

CSS

#container {
    position:relative;
    background:red;
    width:600px;
    height:600px;
}

#cen {
    position:absolute;
    width:300px;
    height:300px;
    background:grey;
    top:50%;
    bottom:50%;
}

HTML

<div id="container">
    <div id="cen"></div>
</div>

http://jsfiddle.net/2xq5F/