虽然我们知道在CSS中加margin:0 auto;(意思是:上下边界为0,左右根据宽度自适应)可以让div等块级元素达到居中的效果，但是往往我们发现虽然我们已经加入margin:0 auto;却仍然没有实现居中。
这往往是由以下两种常见原因引起的：
1、没有设置宽度
[一流素材网]-示例代码<div style="margin:0 auto;"></div>
看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！
2、没声明DOCTYPE
什么是DOCTYPE?
DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分！
DOCTYPE代码示例
下面的代码是不是很熟悉？像这样的，在文档最顶端，所有代码之上的乱七八糟的东西，就是用来声明DOCTYPE的！
[一流素材网]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如何声明DOCTYPE
过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
[一流素材网]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：
[一流素材网]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
[一流素材网]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
言归正传有时候我们的margin:0 atuo;没有正常居中的时候，你需要看看你的文档最顶端有没有正确声明DOCTYPE，如果没有的话，简单复制粘贴一下DOCTYPE声明即可！
发表回复