엔지오식 이동메뉴를 사용하면.. 왼쪽위치를 기준으로 정렬이 되죠.
그런데 저는 전체적으로 가운데정렬인 홈페이지를 자주 만들다 보니 브라우져의 크기값에 따라 위치가 바뀌는겁니다...

그래서 가운데를 기준으로 레이어를 배치시키도록 소스를 조금 고쳐보았습니다.

물론 아래에 다른분들이 올리신 엔지오식 이동메뉴 구현법과 레이어 가운데 정렬법을 참고하여 소스를 혼합하였습니다.
제가 독자적으로 만든게 아니라는걸 우선 밝히구요.
좀 잘 다루시는 분들에겐 그다지 필요하지 않겠지만..
초보분들도 이 소스를 많이 쓰기를 원하시는 것 같아서 올려봅니다.

아래의 소스는 모두 헤드안에 들어가야 합니다.^^
요점은.. 원래 소스의 좌측 위치를 잡아주는 소스를 빼버리고 가운데값을 계산해주는 스타일을 정의해 주므로써 가운데를 기준으로 정렬할 수 있게 만든다는 겁니다.
------------------------------------------------------------
<!--가운데 값 계산//-->
<style>
#STATICMENU
{
position:absolute;
left:expression((document.body.clientWidth-this.style.width)/2-this.getAttribute("pos"));
}
</style>
<!--가운데값 계산끝//-->
<script language="javascript">
<!--
        var stmnGAP1 = 150; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
        var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
        var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
        var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
        var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)

        var stmnTimer;

        // 쿠키 읽기
        function ReadCookie(name)
        {
                var label = name + "=";
                var labelLen = label.length;
                var cLen = document.cookie.length;
                var i = 0;

                while (i < cLen) {
                        var j = i + labelLen;

                        if (document.cookie.substring(i, j) == label) {
                                var cEnd = document.cookie.indexOf(";", j);
                                if (cEnd == -1) cEnd = document.cookie.length;

                                return unescape(document.cookie.substring(j, cEnd));
                        }
        
                        i++;
                }

                return "";
        }

        // 쿠키 저장
        function SaveCookie(name, value, expire)
        {
                var eDate = new Date();
                eDate.setDate(eDate.getDate() + expire);
                document.cookie = name + "=" + value + "; expires=" +  eDate.toGMTString()+ "; path=/";
        }

        // 스크롤 메뉴의 위치 갱신
        function RefreshStaticMenu()
        {
                var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;

                stmnStartPoint = parseInt(STATICMENU.style.top, 10);
                stmnEndPoint = document.body.scrollTop + stmnGAP2;
                if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;

                stmnRefreshTimer = stmnActivateSpeed;

                if ( stmnStartPoint != stmnEndPoint ) {
                        stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
                        STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
                        stmnRefreshTimer = stmnScrollSpeed;
                }

                stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
        }

        // 메뉴 ON/OFF 하기
        function ToggleAnimate()
        {
                if (ANIMATE.checked) { // 이동하기 버튼이 체크되었다면
                        RefreshStaticMenu(); // 메뉴위치를 다시 조정
                        SaveCookie("ANIMATE", "true", 300); // 이동이 ON 상태라고 쿠키를 설정
                }
                else { // 아니라면... (이동하기 버튼이 체크되어 있지 않으면)
                        clearTimeout(stmnTimer); // 이동용 타이머 해제
                        STATICMENU.style.top = stmnGAP1; // 메뉴의 위치를 상단으로 옮긴다.
                        SaveCookie("ANIMATE", "false", 300); // 이동상태가 "OFF" 임
                }
        }

        // 메뉴 초기화
        function InitializeStaticMenu()
        {
                if (ReadCookie("ANIMATE") == "false") { // 이동상태가 off 상태라면
                        ANIMATE.checked = false; // 체크표시를 지우고
                        STATICMENU.style.top = document.body.scrollTop + stmnGAP1; // 맨 위에 들러 붙는다.
                }
                else { // 이동 on 상태라면
                        ANIMATE.checked = true; // 체크표시를 하고
                        STATICMENU.style.top = document.body.scrollTop + stmnBASE; // 기본위치로 이동한다.
                        RefreshStaticMenu(); // 스크립트 가동
                }

        }
-->
</script>


<!-- 스크롤메뉴를 위한 구성입니다. -->
<div id="STATICMENU" pos=390>
<!--pos 부분에 숫자값이 위치를 정하는 부분입니다... 가운데를 0으로 하여 왼쪽은 +값, 오른쪽은 -값으로 설정하시면 됩니다//-->

        <!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
        <table cellpadding="0" cellspacing="0" border="1" style="background:#cccccc; width:190px;">
        <tr>
                <td style="font-weight:bold; text-align:center;">메뉴가 여기 들어간다고라라라<br>메뉴메뉴<br><br>메뉴메뉴<br><br>메뉴가 여기 들어간다고라라라<br>메뉴메뉴<br><br>메뉴메뉴<br><br></td>
        </tr>
        <tr>
                <td>자유게시판</td>
        </tr>
        </table>
        <!-- 메뉴부분 끝 -->

        <!-- 애니메이션 유무를 체크하는 부분 -->
        <input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> Animate

        <!-- 스크롤메뉴를 가동하는 자바스크립트 -->
        <script language="javascript">InitializeStaticMenu();</script>


</div>
<!-- 스크롤 메뉴 정의 끝 -->


-----------------------------------
잘 모르시는 분들을 위해 보충설명을 드리자면.. 위에 pos 라는 값이 들어가는 부분이 위치를 지정해주는 부분입니다.
pos값이 현재는 390으로 되어 있지요.
가운데를 0으로 두고 왼쪽으로 390픽셀만큼 띄어진 곳에 위치하는 겁니다.
만약 이 부분을 0으로 주면 정가운데에 레이어를 위치시킬 수 있지요.
(이 기준점은 레이어의 사각박스중 왼쪽라인을 기준으로 하는 겁니다)
테스트하실때 pos 값을 여러번 바꾸어서 대입해보고 정확한 위치값을 찾아주세요.
-값으로 쓰시면 가운데를 기준으로 오른쪽으로 이동됩니다.


** 이 소스의 단점은... 레이어가 브라우져의 왼쪽끝에 닿았는데도 불구하고 자꾸 밀려난다는 겁니다.
왼쪽끝에 닿으면 더이상 왼쪽으로 가지 않는 방법을 누가 가르쳐 주실수 없으신가요.. ㅜ.ㅜ
어쨋든.. 브라우져 크기만 아주 작게 줄이지 않는다면 가운데를 기준으로 얼마든지 같은 위치에 떠 있을 수 있습니다.