不居中的原因：
1.你忘了在要居中的元素上设置宽度，如：
<div style="margin:0 auto">haha</div> 这样是不行的正确的是：<div style=" width:100px; margin:0 auto">haha</div>
2.你忘了声明doctype
在html最顶端加上即可：如：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3.你或许上面两个都没有遗漏，但是仍然不居中，这时将doctype修改为：
<!DOCTYPE HTML>
OK，搞定！
————————————————
版权声明：本文为CSDN博主「jackletter」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u010476739/article/details/40118161
补充一点:
margin: 0 auto;属于块级元素，如果要设置的要居中元素为display：inline-block属性，就无法应用水平居中
为什么inline-block元素使用margin：0 auto不起作用
再次提到上面的考点，这7大属性的值加起来必须是元素包含块的宽度，这里我们假设其他属性均为0，那也就是margin-left + width + margin-right = 包含块的宽度。
所以：
对于块级元素，当width固定后，margin就能通过margin = (包含块的宽度 - width )/2获得取值
而对于inline-block元素（包含行内替换元素比如img等），内容的宽度就是最终的宽度，没有margin-left + width + margin-right = 包含块的宽度这一限制，所以当margin被设置为auto时，它并不知道要取什么值，就默认为0了，这和为什么垂直方向上不能设置auto是一样的道理。
以上内容用一句话概括就是，auto是基于总宽度-已知固定宽度获得取值的，inline-block元素水平方向的7大属性没有总宽度的限制，所以margin设置为auto时，不知道如何取值，所以默认为0，于是便没有起到我们想要的居中的效果。