如何使用 Internet Explorer 使 div 居中？
Posted
技术标签:
【中文标题】如何使用 Internet Explorer 使 div 居中？【英文标题】：How do you center a div with Internet Explorer? 【发布时间】：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。
【参考方案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;如之前在另一个答案中所述。
【讨论】：
以上是关于如何使用 Internet Explorer 使 div 居中？的主要内容，如果未能解决你的问题，请参考以下文章
如何使 svg 蒙版图像与 Internet Explorer 兼容
如何使Internet Explorer 8支持第n个child（）CSS元素？
使用 Grunt-Babel 使 ES6 Internet Explorer 11 兼容
jQuery .attr() 使 Internet Explorer 崩溃