Eg:
/*CSS*/ #box{ position:absolute; width:200px; height:200px; top:50%; left:50%; margin-left:-100px; margin-right:-100px; } <!-- HTML --> <div id="box"> </div>
Above code will work in all browsers flawlessly. But consider the following css.
/*CSS*/ #box{ position:absolute; width:50%; /*Changed to percentage width*/ height:50%; /*Changed to percentage height*/ top:50%; left:50%; margin-left:-25%; margin-right:-25%; } <!-- HTML --> <div id="box"> </div>
This code will fail in Firefox & Opera. Other browsers it just works fine. There is a work around to make it center. Check the following code.
/*CSS*/ #box { position:absolute; width:50%; height:50%; top:50%; left:50%; margin-left:-25%; } #newBox{ position:absolute; top:-50%; left:0; bottom:50%; right:0; background:green; } <!-- HTML --> <div id="box"> <div id="newBox"> </div> </div>
This code will center the newBox in all browsers. Responsive centering. Automatically adjust with container width.