网页头部实现水平居中（margin：auto）需要知道的

在做一些官网时，我发现了大多数官网的header部分都会用到水平居中。但是对于一些刚开始学习静态网页布局的同学来说，使用margin：auto的时候，知道这其中的原理是很有必要的。

在块级元素设置width值的情况下，设置其margin：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内的元素产生位置变化。