如何集中div交叉瀏覽器

Question

我想知道一種方式在CSS中居中的一個div在不依賴的設置邊緣頂部和底部，用幻數控制高度。

已經學會了所有這些缺點的表格，有些更好，更糟糕，但都依賴於某些東西，並希望永久性地解決任何瀏覽器（至少IE8 +）。

我想集中橫向和縱向div元素沒有不可思議的數字。 div的高度動態增長並自動計算和集中。

澄清，是我不想要的一個例子。對於使用widht和height定義的葉子沒有靈活性，並且必須使用js來操縱添加到每個項目的高度。

http://jsfiddle.net/QsWfg/

<div id="container"></div> 

#container { position: absolute; width: 380px; height: 360px; left: 50%; top:50%;  padding: 30px; margin-left: -220px; margin-top: -210px; background: #000; } 

Answer 1

喜歡這個？

Codepen例如：http://cdpn.io/BuDLo

HTML

<div class='modal-overlay'> 
    <div class='modal-box'></div> 
</div> 

CSS

.modal-overlay { 
    background: black; 
    bottom: 0; 
    height: auto; 
    left: 0; 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 100%; 
} 

.modal-box { 
    background: white; 
    bottom: 0; 
    height: 200px; 
    left: 0; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 200px; 
}