如何居中對齊窗口大小的框？

Question

我想中心對齊一個div（cen），其是另一種格內（imp）

下面是代碼示例

.imp 
{ 
     width:100%; 
     height:100%; 
     background-color: black; 
     position: fixed; 
     top:0; 
     bottom:0; 
} 

上方現在主要的div這應該是中心在div被下面

.cen 
    { 
    margin-left:auto; 
    margin-right:auto; 
    padding:5px; 
    width:auto; 
    height:auto; 

    } 

這裏給出的是我的問題如何使.cen瀏覽器的中間？ 有餘裕：自動;保證金右：自動;帶到中心但不是頂端。我已經給出了50％的頂部，剩下50％，然後我也無法對齊它的中心，因爲.cen裏面的內容更大，所以它出現在窗口的右下角。任何線索或想法？

Answer 1

由於這需要響應，它只能使用Javascript來實現。

var cen = document.getElementsByClassName('cen')[0]; 
var imp = document.getElementsByClassName('imp')[0]; 
cen.style.marginTop = ((imp.offsetHeight/2) - (cen.offsetHeight/2)) + "px"; 

呼叫均resize和load事件上述功能。

Working Fiddle

此外，檢查Calc CSS3屬性。如果您知道子元素的高度，將會有所幫助。

Answer 2

下面是一個CSS解決方案。您需要將您的.imp div封裝在具有窗口高度100％的另一個div中。

主要這裏關鍵是table用於外層的div .imp和table-cell用於內的div .cen與vertical-align: middle沿display值。

CSS

* { 
    margin: 0; 
} 
html, body, #wrapper { 
    height: 100%; 
} 
#wrapper { 
    background-color: red; 
    display: table; 
    width: 100%; } 
.imp { 
    min-height: 100%; 
    background-color: blue; 
    display: table-cell; 
    vertical-align: middle; 
} 
.cen { 
    background-color: orange; 
} 

HTML

<div id="wrapper"> 
    <div class="imp"> 
     <div class="cen">.cen</div> 
    </div> 
</div>