html居中有关问题 _HTML/CSS

html居中问题
做页面时，是在body里加个层<div id="wraps"></div>，然后使#wraps{ margin:0px auto; width:960px;}

这样居中是居中了，但是，当内容改变使body出现垂直滚动条时，就会发生内容整体水平移动动的情况，

目前我想到的解决方法是让垂直滚动条始终显示，但是不知道该怎么做？或者各位有什么其他好的解决办法？

注：页面高度是不确定的，所以垂直滚动条的有无也是不确定的。

------解决方案--------------------
body,html{width:100%;height:100%;overflow-x:hidden;min-width:960px;margin:0;padding:0;}
------解决方案--------------------
滚动条大概会产生10几个像素的距离，margin 左右 auto 当然会重新计算，会有稍微的调整。难道你想不让它重新计算？
------解决方案--------------------
最好不要 width:960px; 给百分比能控制滚动条
------解决方案--------------------

HTML code



<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
            #wraps{
                margin:0px auto; width:960px;
                border:1px solid red;
                position:relative; left:0; top:0;
            }
        </style>
    </head>
    <body>
        <div id="wraps">123</div>
        <button id="btn">body长高了，div会移动吗？</button>
        <script>
            var $ = function(id){
                return document.getElementById(id);
            };
            var $t = function(tag, cot){
                cot = cot || document;
                return cot.getElementsByTagName(tag);
            };
            var a = document.body.offsetWidth;
            $('btn').onclick = function(){
                $t('body')[0].style.height = '2000px';
                var b = document.body.offsetWidth;
                var t = a - b;
                //console.log(t)
                if( t ){
                    $('wraps').style.left = t/2+'px';
                }
                
            }
        </script>        
    </body>
</html>

------解决方案--------------------
5楼的，如果切换浏览器窗口大小呢？最大化，还原……