jquery - 水平居中div

Question

关于 this page ，我想将主要#container div 相对于页面水平居中。通常我会通过添加 CSS 规则来实现这一点，

#container { margin: 0 auto }

但是，此页面的布局(我没有编写)对#container 及其大部分子元素使用绝对定位，因此此属性无效。

有什么方法可以在不重写布局以使用静态定位的情况下实现这种水平居中？如果这是实现我的目标的唯一方法，我对使用 JavaScript/JQuery 没有问题。

Answer 1

与@rquinn 的回答相同，但这将适应任何宽度。检查这个演示

http://jsfiddle.net/Starx/V7xrF/1/

HTML:

<div id="container"></div>

CSS:

* { margin:0;padding:0; }
#container {
    width:50px;
    position:absolute;
    height:400px;
    display:block;
    background: #ccc;
}

Javascript

function setMargins() {
    width = $(window).width();
    containerWidth = $("#container").width();  
    leftMargin = (width-containerWidth)/2;    
    $("#container").css("marginLeft", leftMargin);    
}

$(document).ready(function() {
    setMargins();
    $(window).resize(function() {
        setMargins();    
    });
});