在Internet Explorer 8中使用“margin：0 auto;”
我正在做一些先进的IE8testing，似乎使用margin: 0 auto;的旧技术margin: 0 auto; 在IE8中并不适用于所有情况。
下面这段HTML给出了FF3，Opera，Safari，Chrome，IE7和IE8 compat中的一个居中button，但不是在IE8标准中：
<div style="height: 500px; width: 500px; background-color: Yellow;"> <input type="submit" style="display: block; margin: 0 auto;" /> </div>
（作为解决方法，我可以添加一个明确的宽度button）。
所以问题是：哪些浏览器是正确的？ 或者，这种行为是不确定的情况之一？
（我的想法是， 所有的浏览器是不正确的 – 不应该是100％的宽度，如果是“显示：块”？）
更新：我正在笨拙。 由于input不是块级别的元素，我应该把它包含在“文本alignment：中心”的div中。 话虽如此，出于好奇，我仍然想知道button是否应该在上面的例子中居中。
对于BOUNTY：我知道在这个例子中我做了一些奇怪的事情，正如我在更新中指出的那样，我应该把它放在中心位置。 对于赏金，我想引用规范回答：
-
如果我设置“显示：块”，button应该是宽度100％？ 或者这是不明确的？
-
由于显示是阻塞的，应该“margin：0 auto” 居中button，或不，或不确定？
这是IE8中的一个错误。
从第二个问题开始：“margin：0 auto”以一个块为中心，但只有当块的宽度设置为小于父宽度的时候。 通常情况下，他们是一样的。 这就是为什么下面的例子中的文本不居中。
<div style="height: 100px; width: 500px; background-color: Yellow;"> <b style="display: block; margin: 0 auto; ">text</b> </div>
一旦b元素的显示风格设置为阻止，其宽度默认为父宽度。 CSS规范 10.3.3正常stream程中的块级非replace元素描述了如何：“如果'宽度'设置为'自动'，任何其他'自动'值变为'0'和'宽度' “这里提到的平等是
'margin-left'+'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right'= contains block的宽度
所以，通常所有的汽车都会导致一个块的宽度等于包含块的宽度。
但是，这个计算不应该被应用到被replace的元素INPUT。 被replace的元素在10.3.4中被覆盖， 在正常stream程中被replace的元素被覆盖。 那里的文字说：“宽度的使用值是由内嵌replace元素决定的。” 10.3.2内联replace元素的相关部分是：“if'width'的计算值是'auto'，而元素有一个固有宽度，那么这个固有宽度就是“宽度”的使用值。
我想CSS关心的是IMG元素。 本示例中的Stackoverflow徽标将由所有浏览器居中。
<div style="height: 100px; width: 500px; background-color: Yellow;"> <img style="display: block; margin: 0 auto; " border="0" src="http://stackoverflow.com/content/img/so/logo.png" alt=""> </div>
INPUT元素应该performance相同的方式。
添加<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">解决了这个问题
是的，你可以阅读这个规范一百次，并结合不同的部分，直到你有一个正确的解释 – 但这正是浏览器供应商所做的，这就是为什么我们在今天的情况。
实际上，如果将100％的宽度应用于某个元素，则应将其扩展至其父宽度的100％（如果该父元素是块元素）。 你不能再用margin: 0 auto;居中margin: 0 auto; 那么因为它已经占用了可用宽度的100％。
用margin: 0 auto;居中任何东西margin: 0 auto; 你需要定义一个明确的宽度。 要将内联元素居中，可以使用text-align: center; 在父元素上，尽pipe如果父母有其他孩子，这可能会有不必要的副作用。
表单控件是CSS中的replace元素 。
10.3.4正常stream程中的块级replace元素
“宽度”的使用值是由内嵌replace元素决定的 。 然后，应用未replace的块级元素的规则来确定边距。
所以表单控件不应该被拉伸到100％的宽度。
但是，这应该是中心的。 它看起来像IE8中的一个普通的错误。 如果你设置了特定的宽度，它将使元素居中：
<input type="submit" style="display: block; width:100px; margin: 0 auto;" />
正如buti-oxa所解释的，这是IE8处理replace元素的一个错误。 如果你不想为你的button增加一个明确的宽度，那么你可以把它改成一个内联块，并alignment内容：
<div style="height: 500px; width: 500px; background-color: Yellow; text-align: center;"> <input type="submit" style="display: inline-block;" /> </div>
如果你希望在不支持内联块的老版本的Mozilla（包括FF2）中工作，那么你可以添加display: -moz-inline-stack; 到button。
至于这是一个与规范有关的“bug”; 它不是。 作为后问题的作者，其行为将是“未定义的”，因为在IE中的这种行为只发生在窗体控件，根据规范：
CSS 2.1没有定义哪些属性适用于形成控件和框架，或者CSS如何用于样式化。 用户代理可以将CSS属性应用于这些元素。 build议作者将这种支持视为实验性的。
（ http://www.w3.org/TR/CSS21/conform.html#conformance ）
干杯!
还有一次：我们都讨厌IE！
<div style="width:100%;background-color:blue;"> <div style="margin:0 auto;width:300px;background-color:red;"> Not Working </div> </div> <div style="width:100%;background-color:green;text-align:center;"> <div style="margin:0 auto;width:300px;background-color:orange;text-align:left;"> Working, but dumb that you have to use text-align </div> </div>
尝试所有上述，最终这样做
<div style="width:100%; background-color:red; text-align:center;"> <div style="width:900px; margin:0 auto; background-color:blue;"> hello </div> </div>
在HTML输出的顶部添加<!doctype html> 。
如果是“display：block”，则不应该将button的宽度设为100％
不，这只是意味着它是空间中唯一的垂直方向（假设你没有使用另一个技巧来强制别的东西）。 这并不意味着它必须填满这个空间的宽度。
我认为在这种情况下你的问题是input不是本地的块元素。 尝试将其嵌套在另一个div中，并设置边缘。 但目前我还没有IE8浏览器来testing，所以这只是一个猜测。
如果父元素具有“text-align：center”，则“margin：0 auto”只会在IE中居中一个元素。
- 假设
margin: 0 auto然后该元素应居中，但宽度保持原样 – 无论计算，无视任何保证金设置。 - 如果你设置
<INPUT>标签display:block，那么它应该以margin: 0 auto为中心。
请参阅视觉格式模型细节 -从CSS 2.1规格计算宽度和边距以获取更多细节。 相关位包括：
在块格式化上下文中，每个框的左外边缘都与包含块的左边缘相接触。
和
当一行中的内联框的总宽度小于包含它们的行框的宽度时，行框内的水平分布由“text-align”属性确定。
最后
如果“宽度”设置为“自动”，则其他任何“自动”值都将变为“0”，并由此产生相等值。
如果'margin-left'和'margin-right'都是'auto'，他们使用的值是相等的。 这使元件相对于容纳块的边缘水平居中。
