说到水平居中，有许多方法，最常用的就是margin:0 auto。你知道为什么margin:0 auto可以实现水平居中效果吗？
块级元素的七大水平属性
块级元素有七个水平属性，分别是：
- 左外边距margin-left
- 左边界border-left
- 左内边距padding-left
- 内容宽度width
- 右内边距padding-right
- 右边界border-right
- 右外边距margin-right
这七个水平属性的总和必须等于父元素的宽度。实际情况中，我们设置的水平属性之和并不一定等于父元素的宽度。在这七个属性中，margin-left/margin-right/width这三个属性可以设置为auto，用来弥补实际值与所需总和的差距。
3个auto属性
width,marigin-left和margin-right三个属性都设置为auto，两个外边距将会被转换为0，width会尽可能的宽，使元素完全填充其包含块。
2个auto属性
- width为固定值，margin-left和margin-right设置为auto。两个外边距将会获取相同的长度，使元素在其父元素中居中。
- 将某个外边距和width设置为auto，设置为auto的外边距将减为0，然后width会设置为所需的值，使得元素完全填充其包含块。
1个auto属性
将两个属性显示的设置，另一个设置为auto,auto值将转换为所需的某个值，使元素总宽度达到父元素的内容宽度。
0个auto属性
当三个属性都显示设置时，有两种情况
- 元素总宽度小于父元素的内容宽度时，margin-right尽可能宽,使元素总宽度达到父元素的内容宽度。
- 元素总宽度大于父元素的内容宽度时，margin-right会转换为负值,使元素总宽度达到父元素的内容宽度。
子元素的内容宽度比父元素的内容宽度宽
因为外边距可以为负值，由于子元素的水平属性总宽度要等于父元素的内容宽度，所以当外边距为负值时，子元素的内容宽度就会宽于父元素。
总结
块级元素有七个水平属性，这七个水平属性的总和必须等于父元素的内容宽度。为了弥补实际值与所需总和的差距，可以设置margin-left/margin-right/width这三个属性为auto。给这个三个属性设置不同的auto值，会产生不一样的效果。其中，给margin-left 和 margin-right设置为auto值，给width设置固定值，就会产生水平居中的效果。
