垂直對齊內容到中間時外容器的高度：100％

Question

所以我垂直對齊的內容中與鬼元法：

html {height: 100% } body {min-width: 100% } 
.block { 
    text-align: center; 
    height: 600px; 
} 

.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

.centered { 
    display: inline-block; 
    vertical-align: middle; 
} 

這是一個簡單的方法，我得到中間的內容，但我真的不想要任何固定的高度，我希望它是動態的。儘管我在代碼示例中添加了height：600px，因爲它使它看似工作，但不是動態的。

當我添加一個固定的高度我得到的是在畫面的左側，但我也希望它像右側當視高度較小，因此將削減的頂部和底部空的空間，這不能用固定的高度來完成。

因此，任何其他方法或解決方案，工作良好讚賞！ 另外IE8的支持也不錯。

更新：https://jsfiddle.net/duthzvyo/ 讓它所以當你嘎吱沒有滾動條發生的灰色框視口高度可以這麼說squishes爲好。

Answer 1

如果您想純粹使用CSS（即不是在當前設置中使用JavaScript動態編寫寬度），那麼我建議使用更新的柔性盒模型，該模型功能更強大。

查看一下tutorials on flex-box。

其他解決方案（潛在先進，因爲它們需要JavaScript編碼，但如果您知道如何使用JavaScript進行編碼則更容易）包括Famo.us和（正在進行中）infamous。

還檢查了以下內容的基礎上，食火雞約束求解器：

https://gridstylesheets.org/

https://github.com/IjzerenHein/autolayout.js

最後這兩個庫，可真的很容易中心動態佈局中的元素（除其他事項外） ，在這裏你以一種類似於CSS的聲明方式來定義你的佈局規則，但在我看來，它們比傳統的CSS好得多。

我建議檢查這些工具。 :)