水平居中div

Question

在此页面中，我希望将主要的#container div水平居中于页面。通常情况下，我会添加一个CSS规则来实现这一点，

#container { margin: 0 auto }

然而，这个页面的布局（我没有编写）使用绝对定位来处理 #container 和大部分子元素，因此该属性无效。

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

- Dónal

---

@Starx 很好的问题，我已经更新了我的帖子并回答了（是的）。 - Dónal

在这种情况下，@rquinn有答案适合你。 - Starx

请注意，您需要将 #container 的位置更改为 position:relative，这样您应该能够在不对其他元素产生影响的情况下完成操作，只要 #container 是最外层的元素即可。 - Joel Glovier

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();    
    });
});

- Starx

---

@Don，为什么你还没有接受一个答案？你不是喜欢它吗？:D - Starx

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();    
    });
});

- Ryan Quinn

Answer 3

容器宽度为1024像素，因此您可以尝试给左值50％和margin-left：-512像素。

- kuyabiye

---

这在屏幕宽度为800像素、1280像素、1360像素等等的屏幕上都不行，对吧？ - Starx

为什么不呢？你可以尝试调整窗口大小。 - kuyabiye

它可以在更大的屏幕上工作，但在较小的屏幕上，用户将无法看到整个图像。（他们无法滚动以查看它们） - Dan

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';

- Alejandro

Answer 5

如果您的主容器使用了 absolute 定位，您可以使用以下 CSS 代码将其水平居中；

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

- Sarfraz

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;
}

- Mikul Gohil

---

但是如果#Content及其子元素是绝对定位的，这样做会有效吗？ - Dónal

这将适用于子元素，如果可能的话，您能否给我更多细节？ - Mikul Gohil

Answer 7

这种方法对我来说效果最好。不改变边距，只改变位置。 所需设置： 对象 -> margin-left: 0; 和 position: relative;

查看示例：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>

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

- user3812703