페이지의 중앙에 위치 시킬때는 nn4는 window.innerWidth, window.innerHeight 로 페이지의 크기를 알 수 있습니다. 이것은 가변적으로 변화는 것입니다. 즉, document가 있는 보이는 페이지를 말합니다. 이것과 대응하는 ie4의 것은 document.body.clientWidth, document.body.clientHeight 를 사용할 수 있습니다. ie4와 nn4의 이것들은 페이지가 한 페이지를 넘지 않을 때 사용할 수 있습니다. 오로지 한 페이지에서의 크기입니다.

페이지의 내용이 많아서 한 페이지를 넘어 이동막대가 생기면 위의 높이로는 늘어난 페이지에서 중앙에 위치시키는 것이 안됩니다. 이 때, nn4는 document.width, document.height를 사용할 수 있고, ie4는 document.body.scrollWidth, document.body.scrollHeight 를 사용할 수 있습니다. (ie4의 scroll은 정확히 중앙에 위치하기는 아직까지 모르겠습니다.)

레이어가 자신이 레이어를 가지고 있을 때, 가지고 있는 레이어를 자신의 중앙에 위치 시켜야 보기가 좋을 때가 있습니다. 상위의 레이어의 크기를 알수 있는 방법은 nn4에서는 레이어의 document.height, document.width로 ie4는 레이어의 clientWidth, clientHeight로 알 수 있습니다.

clientWidth와 offsetWidth의 차이점은 레이어가 border가 있을 경우 offset는 border를 포함한 크기이고 client는 border를 뺀크기입니다. 300x300 크기의 레이어가 border가 2라면 offset는 300이고 client는 296이 됩니다. 양쪽 border의 크기를 뺀 크기입니다. 그래서, 둘 다 레이어 안의 레이어를 중앙에 위치시킬 때, 사용할 수 있지만, border가 있는 레이어안에서 정열할 때는 offset를 사용해야 border 값 만큼의 차이가 나지 않습니다. border도 레이어의 부분이지만 레이어 안에서의 좌표는 border는 해당하지 않습니다. border바로 안쪽이 0px 입니다.

<style>
#D1 { position:absolute; width:400; height:400; 
	border-width:1; border-color:blue; border-style:solid;
}
#S1 { position:absolute; top:0; width:200; height:200; 
	border-width:1; border-color:yellow; border-style:solid;
}
</style>

function positionCenter(layer, upWidth, upHeight) { 

        if (n4) {
                layer.left = (upWidth - layer.document.width)/2;
                layer.top = (upHeight - layer.document.height)/2
        }
        else if (e4) {
                layer.style.left = (upWidth - layer.offsetWidth)/2
                layer.style.top = (upHeight - layer.offsetHeight)/2
        }
}
if(n4) {
  positionCenter(document.D1, window.innerWidth, window.innerHeight); 
  positionCenter(document.D1.document.S1, document.D1.document.width, document.D1.document.height); 
}
if(e4) {
  positionCenter(document.all.D1, document.body.clientWidth, document.body.clientHeight); 
  positionCenter(document.all.S1, document.all.D1.clientWidth, document.all.D1.clientHeight); 
}

<div id=D1>
	<table width=398 height=398><tr><td>&nbsp;</td></tr></table>
	<div id=S1>
		<table width=198 height=198><tr><td>&nbsp;</td></tr></table>
	</div>
</div>