中心div水平

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

#container { margin: 0 auto } 

但是，此页面的布局（我没有写），对#container及其大多数子元素使用绝对定位，因此该属性无效。

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

Answer 1

与@rquinn答案相同，但这将调整为任何宽度。 查看此演示

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

HTML：

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，因此您可以尝试给出左值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

如果您的主容器使用absolute位置，您可以使用此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

这种方式对我来说效果最好。 没有改变利润，但位置。 必需：object – > margin-left：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); }); } 

使用：

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