object.style.left = document.body.clientWidth/2 - object.offsetWidth/2;

and vertically:

object.style.top = document.body.clientHeight/2 - object.offsetHeight/2;

After the initial placement, the appearance of the DHTML element on the page is subject to changes in the content or size of the client area. Normally, you had to detect events such as onresize and constantly update the position values whenever the client is resized. With dynamic properties, you would do something like that:

oDiv.style.setExpression("left", 
  "document.body.clientWidth/2 - oDiv.offsetWidth/2");
oDiv.style.setExpression("top",
  "document.body.clientHeight/2 - oDiv.offsetHeight/2");

But you have to do all initial setting upon loading of the page. The following code is a complete code of a DIV element that is being positioned at the center of the client area, using dynamic properties:

<SCRIPT>
window.onload = fnInit;
function fnInit() {
  oDiv.style.setExpression("left", 
  "document.body.clientWidth/2 - oDiv.offsetWidth/2");
  oDiv.style.setExpression("top",
  "document.body.clientHeight/2 - oDiv.offsetHeight/2");
}
</SCRIPT>
<DIV ID="oDiv" STYLE="position: absolute"; top: 0; left: 0>
Example DIV
</DIV>

Notice that you have to define in the DIV statement the STYLE parameters you want to set as dynamic properties. For more on Dynamic Properties, go to Column 65, Dynamic Properties.

People who read this tip also read these tips:

• The removeExpression() Method
• The recalc() Method
• Resolving Conflicting Styles
• Reflowing a Page
• Custom Tags