html - 根据高度将动态方形 div 居中

Question

我正在尝试制作一个 div，即：

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

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

但是，奇怪的是，如果您在调整大小后再次运行 JSFiddle，它会找到正确的形状和大小，所以我认为我遇到了某种反馈循环，框会渲染得很好，但不会t 正确回流。

任何想法都会受到赞赏，无论是关于为什么会发生这种情况或如何完成我正在尝试做的事情。谢谢！

Answer 1

使用CSS3 Units and Values中的vh单位很容易做到这一点（参见现代浏览器中的小提琴）：

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