有没有办法使用 css3 calc 在屏幕中央放置一个对话框？

我正在尝试使用以下内容：

<div class="center">
  ...
</div>

CSS:

.center{
    position: absolute;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2);
    left:calc(50% - 50px/2);
}

然而，div 似乎不是位于视口的中心，而是位于包围它的 div 的中心。

我怎样才能使用 calc 将 div 定位在屏幕中央？

您可以使用新的display: flex

CSS

#overlay {
    height: 100%;
    width: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.dialog {
    margin: auto;
    width: 280px;
}

jsFiddle http://jsfiddle.net/kelunik/enSkf/1/

浏览器支持

Firefox、Safari 6、IE 11（可能是 10）、Opera、Chrome