【转】IE下margin:0 auto不居中解决方法-优快云博客

本文探讨了在不同浏览器下使用CSS实现div元素居中的问题，并提供了三种有效的解决方案，包括调整body样式、使用嵌套div及修改DTD声明。

正常情况下需要将div居中显示时，使用Css样式:margin:0 auto即可，但有时使用margin:0 auto后在FF、Chrome里能居中，而在IE678里不居中的现象。

如下代码:

1 <style type="text/css">
2 #con{width:980px;martin:0 auto;}
3 </style>

1 <div id="con">margin: 0 auto 内容居中显示</div>

可以是对网页主体<body>声明文本居中，即body{text-align:center}
即:

1 <style type="text/css">
2 body{text-align:center}
3 #con{width:980px;martin:0 auto;}
4 </style>

1  <div id="con">margin: 0 auto 内容居中显示</div>

其实和解决方法一差不多，只是在要居中的div外层添加多一个div,并使其居中
即：

1 <style type="text/css">
2 #con{width:980px;martin:0 auto;}
3 </style>

1 <div style=“text-align:center”>
2 <div id="con">margin: 0 auto 内容居中显示</div>
3 </div>

出现这个现象的原因在于文档的DTD声明；
修改DTD为

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

来源：http://blog.kgula.com/margin-0-auto/

转载于:https://www.cnblogs.com/sweet-smile/archive/2012/10/24/2737207.html