[CSS] 不定高度垂直居中

容器给定高度，不定高度的内容如何在容器中垂直居中呢？

<div id=container>
    <div>
        <div id=content>
            
        </div>
    </div>
</div>

#container{
    display:table;
}
#container>div{
    display:table-cell;
    vertical-align:middle;
}

#container{
    width:300px;
    height:300px;
    border:1px solid black;
}
#content{
    height:1px;
    background:gray;
}