Question

我去了MSDN和Google Coding，他们都给出了同样的例子。他们说你可以把这样的div放在中心，但它不起作用。谁知道为什么？我也想知道以div为中心的最佳方法。我试着做margin: 0 auto;它不起作用。

Answer 1

必须为div指定一个宽度才能使边距技巧起作用：link

<div style='width:800px;margin:0 auto;'>Div Middle</div>

Answer 2

您使用的浏览器是什么？你有任何示例代码吗？也许是gist.github.com或jsfiddle.net。

如果我推断你想要什么，你需要做一些事情。

包含DIV
为子DIV定义的CSS width
儿童DIV的CSS margin: 0 auto;

以下示例代码来自：http://jsfiddle.net/sukima/5RQpw

HTML

<div id="parent">
    <!-- Must have a container div -->
    <div id="child">
        This is a test
    </div>
</div>

CSS

#parent {
    background-color: green;
    /* Center's text not div. Can be here or in child. */
    /* text-align: center; */
}
#child {
    background-color: red;
    width: 80px; /* Required. Develop your own calculation. */
    margin: 0 auto; /* Centers the div */
}

Answer 3

我看到每个人基本上都发布了相同的内容，但他们都在制定规则，它必须在一个包含的分区内（fyi，<body>完全可以作为'容器'，它不是是一个部门）或必须有一个设定的宽度。显然，如果你没有设置宽度，那么边距将没有效果，因为它会扩展到整个宽度（因此没有边距区域）。

如果你没有发布你正在使用的实际HTML和CSS，我们根本无法帮助你，因为我们不知道发生了什么。根据标准，margin: 0 auto应该有效。如上所述，即使您没有指定宽度，仍然会应用'auto'，并且仅当分区扩展到整个宽度时，仅计算为0，因此没有填充边距。

唯一想到的是你正在移除块级样式。也许您将其定义为display: inline？内联元素不能有边距，而是会关注父元素的text-align属性。此外，如果你以任何方式漂浮分区，你显然不能说它居中，因为漂浮点是将它推向左边或右边（不是中心）。我们可以继续猜测，但实际上你应该改进你的问题。要添加的另一个注意事项：您不能将margin: 0 auto与固定位置元素一起使用。

Answer 4

margin: 0; /* reset */
margin-left: auto;
margin-right: auto;
text-align: center; /* For IE */

您需要text-align: left后面的内部部分。

Answer 5

如果你不知道你的盒子的大小，可以使用shrink wrapping techniques让你仍然使用margin:0 auto。（在我链接的教程中，他们只展示了display:inline和display:table所做的一切。）

编辑：我的不好。他们仅在margin:0 auto收缩包装的演示中使用了display:table。

Answer 6

请尝试以下。

#content
{    
    width: 740px;
    clear: both; 
    padding: 0; 
    margin: 0 auto;
}

Answer 7

你需要IE8及以上版本（我在9上试过这个）。在允许您运行网页之前，IE抱怨运行活动的x控件。

<html>
  <head>
    <style>
      #oDiv
      {
        background-color: #CFCFCF;
        position: absolute;
        left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2);
        top:expression(document.body.clientHeight/2-oDiv.offsetHeight/2);
      }
    </style>
  </head>
  <body>
    <div id="oDiv">Example DIV</div>
  </body>
</html>

问题当然是，这与所有浏览器都不兼容。使用CSS严格地垂直和水平居中div更复杂，但可以完成。（这有助于在正确的地方使用 。

以动态为中心

7 个答案:

HTML

CSS