关于什么元素的分类可以看我这篇文章

行内级元素

• Inline，非置换元素:如果margin值为auto，则margin-left和margin-right的计算值也就为0

• Inline,置换元素:同上

• Inline-block,置换元素在文档流中:同上

• Inline-block,非置换元素在文档流中:同上

块级元素

块级非置换元素，在文档流中

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

下面的情况下，如果margin值为auto

• 如果width是auto值，那么其他值是auto的值就为0

• 如果margin-left和margin-right的值为auto，width的值不为auto，那么就相对于包含块水平居中。

块级置换元素，在文档流中

同块级非置换元素一样。

块级非置换元素，不在文档流中(Absolutely positioned, non-replaced elements)

// 当top/height/bottom 这3个值不是auto，而 margin:auto ，则：margin-top=margin-bottom=（包含块的高度 – 定位元素高度）/2'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

块级置换元素，不在文档流中

同上

总结

行内级元素

行内级置换元素和非置换元素，在margin值为auto时，margin-left和margin-auto的计算值都为0。

块级元素

1. 块级置换元素和非置换元素在文档流中:

   'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

• 如果width是auto值，那么其他值是auto的值就为0

• 如果margin-left和margin-right的值为auto，width的值不为auto，那么就相对于包含块水平居中。

2.块级置换元素和非置换元素不在文档流中。

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for margin-top and margin-bottom as well.

abs-non-replaced-height