Internet Explorer CSS - 中心区答案

【问题标题】：Internet Explorer CSS - Center DivInternet Explorer CSS - 中心区
【发布时间】：2012-05-23 08:33:05
【问题描述】：

我最近创建了一个网站，但我在使用 Internet Explorer 时遇到了一个非常大的问题。 CSS 似乎在 IE 中做了一些奇怪的事情。这里不是复制数百行 CSS 而是指向该站点页面的链接：http://www.appwheal.com/app/ios/angry-birds-space 所有内容应显示在屏幕中间。取而代之的是 IE 它被卡在左边。

我正在使用

margin-left: auto;

margin-right: auto;

这个是IE支持的吧。

请提前帮助和感谢。

【问题讨论】：

Float a div to center的可能重复

标签： html css internet-explorer doctype

【解决方案1】：

您需要声明一个DOCTYPE，否则 Internet Explorer 默认为 Quirks 模式（IE5 兼容）。进入 Internet Explorer，按 F12 以调出开发者工具，并注意它在文档模式下显示“怪癖”模式。 Quirks 不支持任何已知的 div 居中方法，并且声明 DOCTYPE 是修复它的最简单（也是推荐）的方法。

要将页面设置为 XHTML 1.0 过渡（最常见），请使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

要声明页面与 HTML5 兼容，请使用

<!DOCTYPE html>

DOCTYPE 行必须是 html 文件中的第一行，出现在开头的 <html> 标记之前。

【讨论】：

谢谢，我觉得我忘了这个很傻。至少我不必更改大量 CSS。
非常感谢您的解释！

【解决方案2】：

你还必须设置

body {
    text-align: center;
}

#yourDiv {
    margin: 0 auto;
    text-align: left;
}

【讨论】：

DOCTYPE 未设置； IE 正在以 Quirks 模式呈现页面。
是的，如果你把开发者工具里的文档模式改成IE7，不用改CSS就可以完美运行，所以不需要在body中设置text-align: center
好的，我给你。但一般来说，设置margin: 0 auto; 被认为只是解决方案的一半。有很多教程说为了可靠性，你应该包括其他部分（对齐中心为主体，左对齐为你的包装）

【解决方案3】：

设置边距和宽度：

#yourDiv {
  margin: 0 auto;
  width: 300px;
}

【讨论】：

【解决方案4】：

你可以使用老派的 text-align:center 并尝试 top:50%;左：50%；并偏移合适的负像素

【讨论】：