中心基于高度

我试图让一个div这是一个动态的方形格：中心基于高度

一）在窗口中央广场
B）动态调整大小根据窗口
C的高度）（垂直和水平）

而我似乎无法立即获得所有三个。我周围看了很多东西，并没有任何技巧（display:table-cell，:before元素等）似乎为我工作。在这两个JSFiddles中可以看到最接近的两个JSFiddles：http://jsfiddle.net/LN78N/和http://jsfiddle.net/EKarx/，这两者在您尝试调整窗口大小之前似乎很好。

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

任何想法，将不胜感激，无论是为什么发生这种情况，或如何完成我想要做的。谢谢！

来源

2013-07-11 gsroth

你需要的是真正的*方*，在相同宽度的高度？ –

我不认为你可以做到这一点，而不使用JavaScript解决方案。问题是，如果只调整一个方向的窗口大小并将高度和宽度属性设置为100％，则可以大于另一个。你可以做的是将一个事件处理程序附加到window.resize函数，并将它的宽度和高度都设置为调整大小时更小的百分比。 – Rooster

这个想法是让它尽可能的平方。这也从一个实现问题转向了学术问题：是否有可能通过今天跨浏览器的工具来满足html/css中的这三个要求？ – gsroth

这是很容易做到这一点利用CSS3单位和值vh unit（see fiddle在现代浏览器）：

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

来源

2013-07-11 18:32:28

不错！如果我们生活在现代浏览器的世界中，这也会很好。 :-) – isherwood

这是一个很棒的解决方案！我希望它能够全面实施，但现在我可能不得不使用它，希望以后有更多的支持。 – gsroth

哇这真棒！ – Rooster

中心基于高度

回答

相关问题