动态居中一个 Div答案

【问题标题】：Dynamically Centering a Div动态居中一个 Div
【发布时间】：2011-11-20 15:29:48
【问题描述】：

我去了MSDN和Google Coding，他们都举了同样的例子。他们说您可以像这样将 div 居中，但它不起作用。有人知道为什么吗？我也想知道使 div 居中的最佳方法。我试着做margin: 0 auto;没用。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

嗯？这只是因为如果宽度为 100%，那么 auto 将计算为 0，因为没有周围空间可以边距。这个技巧也适用于百分比，我一直使用 75% 的宽度。
绝对宽度，我的意思是定义的宽度=p

【解决方案2】：

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

如果我推断出你想要什么，你需要一些东西。

包含 DIV 的一个
为子 DIV 定义的 CSS width
CSS margin: 0 auto; 用于子 DIV

以下示例代码来自：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 */
}

【讨论】：

【解决方案3】：

我看到每个人基本上都在发布相同的东西，但他们都在制定规则，它必须在一个包含的分区内（仅供参考，<body> 作为一个“容器”工作得很好，它没有是一个部门）或必须有一个固定的宽度。显然，如果不设置宽度，则边距将不起作用，因为它会扩展到全宽（因此没有边距区域）。

如果您不发布您正在使用的实际 HTML 和 CSS，我们真的无法帮助您，因为我们不知道发生了什么。按照标准，margin: 0 auto 应该可以工作。如上所述，即使您不指定宽度，仍然会应用“自动”，并且仅计算为 0，因为除法扩展到整个宽度，因此没有要填充的边距。

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

【讨论】：

【解决方案4】：

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

你需要text-align: left之后的内部零件。

【讨论】：

【解决方案5】：

如果您不知道您的盒子的尺寸，您可以使用shrink wrapping techniques 让您仍然可以使用margin:0 auto。（在我链接到的教程中，他们展示了使用 display:inline 和 display:table 完成的事情。）

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

【讨论】：

【解决方案6】：

试试下面。

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

【讨论】：

【解决方案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 垂直和水平居中更复杂，但可以做到。（这有助于在正确的地方使用&nbsp;）。

【讨论】：

"这与所有浏览器不兼容。"所以这个only适用于IE8+？那么到底为什么你会曾经使用这个呢？
@animuson 这就是重点。这个问题的题目是dynamically centering a div。提出问题的人发布了指向动态属性的 msdn 资源的链接。我想也许他很难设置 MS 的示例。到目前为止，没有人以任何方式发布正确答案。问这个问题的人可能想问如何在另一个被阻止的元素中垂直和水平对齐 div。
他们还链接到 Google Coding，margin: 0 auto 暗示他将其水平居中，因为 OP 中从未提及垂直。