크로스 브라우징 하는데 엄청난걸 발견했어요.

아무리 중앙정렬을 해도 크롬은 중앙으로 오질 않습니다.
그래서 한가지 실험을 해봤습니다.
좀더 작은 레이어로 창을 줄였다 늘렸다 하면서 테스트를 해본결과
위와같은 차이가 있었습니다.

크롬:레이어 정 중앙을 기준으로 중앙정렬
파폭:레이어 왼쪽 점을 기준으로 중앙정렬
IE :레이어 왼쪽 점을 기준으로 중앙정렬

이런 상태인데 어떻게 해서 모두 중앙정렬을 하겠습니까..
그냥 파폭과 IE를 따라야할까요??.....국내점유율도 높으니...
방법을 아시는분은 좀 알려주시면 감사요~~


직접 보고싶으신 분은 http://jbco.kr/TEST.php <--여길 클릭하세요.



제가 쓴 중앙정렬 소스는 아래와 같습니다.

<div id="container" style="margin:0px; position:absolute; left:0px; top:0px; z-index:500;">

<div id="mainmenu" style="margin:0px; width:365px; border:0px solid red; position:absolute; left:0px; top:222px; height: 34px; background-color: #3399FF; layer-background-color: #3399FF;">
<table border="0" cellpadding="0" cellspacing="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<tr>
<td width="25" bgcolor="#0033CC"></td>
</tr>
</table>
</td>
</tr>
</table>

</div>



<script type="text/javascript">
function hvSet() {
var winW

if (self.innerHeight) {
// 알려진 모든브라우저에 통용됨
winW = self.innerWidth;
} else if (document.documentElement && document.documentElement.clientHeight) {
// 얼마전 장례식까지 치룬 ie6를 위한 코드
winW = document.documentElement.clientWidth;
} else if (document.body) {
// 기타 브라우저
winW = document.body.clientWidth;
}
var containerW = document.getElementById('container').scrollWidth;

//가로 가운데 정렬
document.getElementById('container').style.left = String(winW/2 - containerW/2) + 'px';
//세로 가운데 정렬
}
//초기실행
hvSet();
//브라우저의 사이즈가 변경될때마다 실행됨
window.onresize = hvSet;
</script>

</div>