DIV垂直居中对齐

效果图：

CSS:

 #container{
        display:table-cell;
        width:300px;
        height:300px;
        vertical-align:middle;
        border:1px solid #ccc;
        border-radius:20px;
        text-align:center;
}
#cell{
        margin: 0 auto;
        width:100px;
        height:100px;
        border:1px solid red;
        border-radius:10px;
 }

HTML:

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