Как централизовать div crossbrowser

Question

Я хотел бы знать способ в CSS, чтобы центрировать div в не зависящем от заданного края - сверху и снизу, управлять высотой с помощью магических чисел.

Формы, которые изучили все эти недостатки, некоторые лучше и хуже, но все они зависят от чего-то и хотели бы иметь постоянное решение для любого браузера (по крайней мере, IE8 +).

Я хочу централизовать горизонтально и вертикально элемент div без магических чисел. Там, где высота div динамически и автоматически рассчитывается и централизована.

Чтобы уточнить, это пример того, чего я НЕ хочу. Для использования widht и height defined не оставляет никакой гибкости и приходится манипулировать высотой, добавленной к каждому элементу с помощью 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; 
}