# 4、为何auto可以实现水平居中
# 宽度计算
TIP
默认的宽度计算规则是“适应于父级”规则
W3C css 2.1第十章里为常规流替换和非替换块元素定义了这个算式：
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block
同时为几项auto设置了额外的算法：
If there is exactly one value specified as 'auto', its used value follows from the equality. If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.
如果width值被设置为 auto 值，那么其它属性是 auto 的值就为 0.
If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.
第二条：所以说 width: auto， margin: auto 的时候啊，margin 就为 0 了
整个容器充满包含块呗。也就没水平居中啥事儿了。
第三条：如果margin-left和margin-right的值都为auto，使用相等的值，那么水平居中包含块
如果width为auto，那么ml/mr中auto值将变为0后面的if不再生效
如果width值不为auto，ml/mr值为auto，那么此包含块居中显示；
对于绝对定位元素，有以下算式：
left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block
加入了left和right，可以用类似的方式达到水平居中
# 为什么不能垂直居中？
高度计算
默认行为的高度计算则是一系列“撑高”规则，而非“适应于父级”规则。
width相关计算依赖于其包含块，这玩意是最初能确定的值，而height相关计算依赖于其自身内容高度，由于数据数量不确定，所以自身内容高度是不能最初确定值的，所以无法建立类似的公式来使用mt、mb auto来实现高度居中。