根据高度居中动态方形div

Question

我正在尝试创建一个div：

a）方形
b）根据窗口的高度动态调整大小 c）在窗口中心（垂直和水平）

我似乎无法立刻得到这三个人。我看了很多，所以没有任何技巧（display:table-cell，:before元素等）似乎对我有用。在这两个JSFiddles中可以看到我得到的最接近的：http://jsfiddle.net/LN78N/和http://jsfiddle.net/EKarx/，在您尝试调整窗口大小之前，这两个看起来都很好。

但奇怪的是，如果你在调整大小后再次运行JSFiddle，它会找到合适的形状和大小，所以我想我已经遇到了某种反馈循环，其中框会渲染得很好，但不会正常回流。

任何想法都会受到赞赏，无论是为什么会这样，或者如何完成我想要做的事情。谢谢！

Answer 1

使用CSS3单位和值中的vh unit（现代浏览器中的see fiddle）可以轻松完成此操作：

.square {
    background: #ccc;
    height: 60vh;
    width: 60vh;
    margin: 20vh auto;
}