margin:0 auto 不能实现水平居中的原因解析

margin:0 auto 不能实现水平居中的原因解析

1. 需要居中的元素没有设置宽度

margin:0 auto 中auto的意思是根据元素左右宽度自适应，但是在块元素不设置宽度width的情况下，宽度width默认是100%，这样不能实现宽度的自适应，从而不能达到水平居中的效果。

2. 对行内块和行内元素设置auto

margin:0 auto只对block块元素起作用，当给想要居中的inline-block行内快元素或者inline行内元素设置margin:0 auto实现水平居中是不管用的，可以转换成块元素之后再使用。

3. 给外层元素设置了float

有时不注意给要设置居中的外层元素设置了float(float:left或者float:right),因为设置了float后会让内层元素靠左或者靠右浮动，但是有设置auto想要水平居中，显然出现了逻辑上的错误，就不能实现居中效果了。

4. 没声明DOCTYPE

DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分！

5. 设置margin:0 auto的选择器混淆

直接给body设置margin:0 auto, margin:0 auto应该是作用对象，如div，p，而不是body。除非你定义body的宽度，那将会让body内的元素产生位置变化。

附加：

如果上面的几种方法解决了都不能实现水平居中，则可以用 text-align:center。到body中加上text-align:center，这样不仅是div,文字也会居中显示。