html - How to centralize div crossbrowser -

i know way in css center div in without being dependent set margin-top , down, control height magic numbers.

the forms have learned these disadvantages, better , worse, dependent on something, , permanent solution browser (at least ie8+).

i want centralize horizontally , vertically div element without magical numbers. height of div grow dynamically , automatically calculated , centralized.

to clarify, example of not want. use widht , height defined leaves no flexibility, , have manipulating height added each item using 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; } 

like this?

codepen example: 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; }