中心基於高度

我試圖讓一個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

中心基於高度

回答

相關問題