div 不使用 margin: auto 在 IE9 中居中答案

【问题标题】：div does not get centered using margin: auto in IE9div 不使用 margin: auto 在 IE9 中居中
【发布时间】：2013-04-19 12:18:12
【问题描述】：

我试图在侧边栏留空的空间中居中。这就是我想要的样子：

实际上，对于大多数使用 margin: auto 的浏览器来说，我设法使这项工作正常，同时设置 overflow: hidden：

Fiddle here

CSS

#header {
    height: 50px;
    background: #224444;
    color: #fff;
}

#container div {
    padding: 1em;
}

#content {
    max-width: 400px;
    margin: auto;
    background: #ddd;
    height: 300px;
    overflow: hidden;
}

#sidebar {
    float: right;
    width: 200px;
    background: #aaa;
    height: 300px;
}

HTML

<div id="container">
    <div id="header">
        PAGE HEADER
    </div>
    <div id="sidebar">
        Sidebar
    </div>
    <div id="content">
       Centered Content
        (Works everywhere but on IE9)
    </div>
</div>

但是，它不适用于 IE9。奇怪的是 IE8 工作正常！

我的想法不多了，所以我想也许有人知道发生了什么？这个技巧似乎在其他任何地方都非常有效。

注意：请注意div 的内容应该是灵活的，因为它在演示中。随着可用空间的减少，它应该改变大小并挤进去。

【问题讨论】：

如果您希望居中的内容具有可变宽度，则几乎可以排除使用margin: auto;
@MattCoughlin IE8 和除 IE9 之外的所有现代浏览器似乎都不同意，不过：/
hmmm... 一旦max-width 启动，它必须充当隐式固定宽度，以便margin: auto 具有固定宽度（我猜在IE9 中除外） .
在容器中居中自动宽度浮动有一个相当古老的解决方案：artlebedev.com/tools/technogrette/html/align-center

标签： html css internet-explorer internet-explorer-9

【解决方案1】：

将居中与浮动隔离

这会影响 IE9/10。

如果浮动元素被移除，或者如果使用width 而不是max-width，它可以正常工作。浮动内容的存在，加上使用margin:auto 和max-width 而不是width，似乎让IE9+ 感到困惑。

为了解决这个问题，将居中的内容放在一个包装器 div 中，这样可以将内容的居中与侧边栏的浮动分开。换句话说，在单个 div 中布局方面发生了太多事情，超出了 IE9+ 的处理能力。因此，将#content div 拆分为两个单独的 div。

#header {
    height: 50px;
    padding: 1em;
    background: #224444;
    color: #fff;
}

#content-wrapper {
    overflow: hidden;
}
#content {
    max-width: 400px;
    margin: auto;
    padding: 1em;
    background: #ddd;
    height: 300px;
}

#sidebar {
    float: right;
    width: 200px;
    padding: 1em;
    background: #aaa;
    height: 300px;
}

<div id="container">
    <div id="header">
        PAGE HEADER
    </div>
    <div id="sidebar">
        Sidebar
    </div>
    <div id="content-wrapper">
        <div id="content">
            Centered Content
        </div>
    </div>
</div>

这在 IE7/8/9/10 中测试良好。附带说明一下，由于添加了包装器 div，因此现在必须将 padding: 1em; 单独添加到每个元素中。

【讨论】：

第二个。 IE 8 和最新的 Firefox、Safari、Chrome 似乎可以在同一个 div 中处理绝对定位、最大宽度和自动边距。 IE 9、10 和 11 不会——它们会将其定位在左侧。我确认拆分“绝对”和最大宽度/边距适用于所有浏览器，包括 IE 9、10 11。感谢 Matt =)

【解决方案2】：

IE 因没有正确的文档类型而无法工作而臭名昭著。

尝试添加 HTML5 的

<!DOCTYPE html>

【讨论】：

【解决方案3】：

据我所知，margin:0 auto 一直存在问题，因为我没有指定 width 属性。所以每次你想使用margin:auto 你应该写这个：

#content {
    max-width: 400px;
    margin: auto;
    background: #ddd;
    height: 300px;
    overflow: hidden;
    width:500px;
}

或百分比：

#content {
    max-width: 400px;
    margin: auto;
    background: #ddd;
    height: 300px;
    overflow: hidden;
    width:30%;
}

编辑如果您想创建灵活的布局，请查看bootstrap 和流体网格。

【讨论】：

谢谢，我已经想到了，但我不想固定内容宽度。我只是希望它有一个最大值，然后适应任何可用的空间。

【解决方案4】：

花车是一件棘手的事情。严格来说，它们只应该影响在它们周围流动的内联内容，所以边距就像浮动不存在一样。

试试这个：

#container {text-align:center}
#content {display:inline-block;text-align:left}

这应该使内容框表现得像一个内联元素，因此在空间中居中显示。

【讨论】：

非常感谢。它可以工作（#content 居中），但它会产生另一个更糟糕的问题：内容不会适应可用空间。当您减小窗口大小时，您会看到#content 最终会向下移动。