保证金自动失败 IE11答案

【问题标题】：Margin auto fails IE11保证金自动失败 IE11
【发布时间】：2015-10-25 08:59:18
【问题描述】：

如果你 check my website 使用 Chrome 浏览器，你可以看到名为 .bg-content 的 div 在这种风格下如何正常工作：

.bg-content {
    max-width: 605px;
    height: 149px;
    position: absolute;
    top: 62px;
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

但是，如果您使用 Internet Explorer 11 打开我的网站，则 div .bg-content 未居中，他向左浮动。

我该如何解决这个问题？

【问题讨论】：

标签： html css internet-explorer-11

【解决方案1】：

它不起作用，因为最大宽度；

试试这个：

.bg-content {
    width: 605px;
    height: 149px;
    position: absolute;
    top: 62px;
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

【讨论】：

我添加了内容：'';位置：绝对；宽度：37%；高度：4px；背景：#ffcc11；底部：0px；左：0px；右：15px；边距：0 自动；但它不起作用，它只出现在左侧
设置display: block 和max-width 对我有用。

【解决方案2】：

你应该使用

width: 100%;

在您的 .bg-content 元素中

示例： IE11 max-width & margin auto fix

【讨论】：

这是最优雅的答案

【解决方案3】：

我一直用于 Internet Explorer（不过主要用于旧版本）的 hack 是设置父容器 text-align: center; 和容器本身 text-align: left;。

我查看了您的网站，父容器似乎没有默认宽度。请尝试将其设置为width: 100%;。我在运行时环境中尝试过，它似乎可以工作。

【讨论】：

为width: 100%点赞。只要还声明了width: 100%，就可以按预期使用max-width。

【解决方案4】：

对于一个固定位置的元素：

left: 0;
right: 0:
width: 100%;
margin: 0 auto;

【讨论】：

【解决方案5】：

对于绝对位置元素，你可以使用这个

 position: absolute;
 margin: 0 auto;
 left: 0;
 right: 0;
 top: 200px; // change this as you want
 width: 450px; // change this as you want
 margin-left: auto;
 margin-right: auto;

【讨论】：