水平居中 div

Question

在此页面上，我想将主#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();    
    });
});

Answer 2

您也可以使用 jQuery：

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

然后我将此代码放在 $(document).ready 事件之后：

$(document).ready(function() {

    setMargins();

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

Answer 3

容器宽度是1024px，所以你可以尝试给left值50%和margin-left:-512px。

Answer 4

使用 Javascript，这会将 #container 置于浏览器窗口的中心。

document.getElementById("container").style.top= (window.innerHeight - document.getElementById("container").offsetHeight)/2 + 'px';
document.getElementById("container").style.left= (window.innerWidth - document.getElementById("container").offsetWidth)/2 + 'px';

Answer 5

如果您的主容器使用绝对位置，您可以使用此 CSS 将其水平居中；

#container {
   position:absolute;
   width:1000px;  /* adjust accordingly */
   left:50%;
   margin-left:-500px; /* this should be half of the width */
}

Answer 6

这很简单。
试试这个

body {
    margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
    text-align:center; /* Hack for Internet Explorer 5/Windows hack. */
}

#Content {
    width:500px;
    margin:0px auto; /* Right and left margin widths set to "auto". */
    text-align:left; /* Counteract to Internet Explorer 5/Windows hack. */
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

Answer 7

这种方式最适合我。不改变边距，但改变位置。
必需的：
对象->左边距：0；位置：相对；

检查此处的示例： jsfiddle
代码：

function setObjPosition(container, object) {
    var containerWidth = $(container).width();
    var objectWidth = $(object).width();

    var position = (containerWidth / 2) - (objectWidth / 2);

    $(object).css('left', position);
}

function setPositionOnResize(container, object) {
    setObjPosition(container, object);
    $(container).resize(function () {
        setObjPosition(container, object);
    });
}

用途：

<script type="text/javascript">
    $(document).ready(function () {
        setPositionOnResize(window, "#PanelTeste");
    });
</script>

它可以在任何容器内居中。