如何使用 Internet Explorer 使 div 居中？答案

【问题标题】：How do you center a div with Internet Explorer?如何使用 Internet Explorer 使 div 居中？
【发布时间】：2011-11-22 06:14:13
【问题描述】：

我在使用 Internet Explorer 和居中时遇到问题，我的问题是如何在没有 CENTER 标签的情况下将 div 居中它必须在所有浏览器中工作，因为我在用

margin:auto;

它适用于所有borwsers 但它在 Internet Explorer 中不起作用我正在寻找适用于所有浏览器的东西有人叫我放

text-align: center;

到正文，但比所有文本都到中间

那我该怎么做呢？

【问题讨论】：

margin:auto 如果指定宽度应该可以工作
margin:0 auto 也可以与一些 shrink wrapping techniques 一起用于没有指定宽度的 div。

标签： html css center centering

【解决方案1】：

你已经接近了。使用下面的 CSS：

margin:0 auto;

这里是a working jsFiddle。请注意，我给了 div 一个固定的宽度。

【讨论】：

【解决方案2】：

您需要指定宽度和边距：

div.center { width:980px; margin:0px auto; }

示例 HTML：

<html>
<head></head>
<body>
<div class="center">CONTENT</div>
</body>
</html>

【讨论】：

【解决方案3】：

IE 对自动边距的支持参差不齐（即，怪癖模式下的不同行为）。这应该适用于几乎所有情况：

CSS：

.container {
    /* for IE */
    text-align: center;
}
#the-div {
    /* reset text-align */
    text-align: left;
    /* for "good" browsers */
    margin: 0 auto;
}

HTML：

<div class="container">
    <div id="the-div">centered content</div>
</div>

【讨论】：

太棒了:) 猜猜你发现我的// cmets 在我之前就被破坏了，虽然哈哈。正在修复...
使用body作为容器可以去掉容器div。

【解决方案4】：

是的，这在 IE 中完美运行。

.container {
    /* for IE */
    text-align: center;
}
#the-div {
    /* reset text-align */
    text-align: left;
    /* for "good" browsers */
    margin: 0 auto;
}

【讨论】：

【解决方案5】：

您的 CSS 很接近，您的问题不在于浏览器。简单的解决方法是更改内部 div 类。

您的绝对位置为左 25%... 使用左 50%，它会自动更正。

完全删除左边：50% 并添加边距：0 auto;如之前在另一个答案中所述。

【讨论】：