Question

I am trying to position a div box which has a certain height and certain width to the center of a screen which has a certain height and a certain width.

The width and heights are detected JavaScript. I am trying to become a better programmer and math and programming not always my best traits. I realize I need to do some division and percent fix but need a pointer:

<script type="text/javascript">

var w=document.width;
var h=document.height;

var img_w=200;
var img_h=300;

var css=;

/*

Example

w=600;
h=400;

img_w=200;
img h=300;


therefore css will be

position:absolute;
top:150px;
left:100px;
right:100px;
bottom:100px;

see my image.

*/

document.writeln(css);
</script>

So basically, whatever the img_w and img_h are, the box should position with margin in the center.

Answer 1

Please let me suggest an alternative approach.

CSS is not a procedural but declarative language. Let the browser do the math for you and use margin: auto. I understand this is not what you are looking for, but CSS is just about it.

See http://jsfiddle.net/th43T/ for an example.