点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
若问如何设置文档流中的块级元素在父元素内部水平居中时？相信大家都能很快的想到用下面这种方法来搞。
.child{
width:任意固定大小值
margin: 0 auto
}
是的，那为什么这样就能实现子元素在父元素里水平居中呢？听我来详细分析一下。若您觉得有点道理请点个赞在走。
【就其原因其实只需要记住最后得出的一个结论就行了，但是为了更好的理解这个结论，我还是会先啰嗦的说一些基础性的东西，非常希望对大家有用】
有如下几个关键点：
第一，必须是块级元素
行内元素和行内块级元素都不行，这里，有些元素生来就是块级元素，生来不是块级元素的也可以通过display属性把它造成块级元素。
为什么一定要是块级元素呢？因为只有块级元素才默认具有满屏特性。那什么又是满屏特性呢？如下图
这个设置成空文本的块级元素P在iPhone6模拟器（这里为了让宽度值更好说明满屏用了模拟器，可以使用任意浏览器大小窗口）下的效果，可见默认width等于屏幕的宽度375px。而行内元素默认宽度值要么是0，要么就是auto。这就是满屏效果。满屏效果也是我们实现居中的基础。
第二，块级元素的水平尺寸属性计算规则
任何一个块级元素在水平方向上的尺寸属性计算规则是水平方向上各个属性大小值相加。即有如下等式：
outerwidth = marignleft + borderleft + paddingleft + width + paddingright + borderright + marginright
由第一点可知，上面这个公式中，缺任何一个值所遗留出来的空间就会被其中其它某些或者一些属性侵占掉。至于怎么侵占呢？这个当然，浏览器有它自己的玩法。在往下看......
第三，尺寸属性的auto特性
我在控制台将四个尺寸属性都设置成auto。结果如下：
只有width和margin属性值是可以设置成auto的，其它两属性不支持auto。（这一点证明官网上说的是错的，所以说，什么都得验证一下，不要尽信书和官方说明，其中有些书更是有点'胡扯'）。
请记住这一点。只有width和margin是可以设置成auto的。
第四，浏览器的默认属性值
块级元素的尺寸属性默认值，由于具有满屏特性，width大小由浏览器计算出来的满屏大小值。这里是375PX，也就是官网说的auto。这里auto和100%计算出来的值都是一样的，其它值都是0。
第五，auto水平原理
基于上面几点：
第一，块级元素一定是满屏的。
第二，只有width，marginleft，marginright可以设置auto。
第三，默认width是浏览器默认计算出来的大小值（这里和auto/100%效果一致）。其它值默认都是0。
为了证明auto原理，我们来看几种情况的效果：
1、任意一个auto的情况，其值会默认填充剩余空间。
2、任意两个auto的情况，当浏览器不知道怎么分配剩余空间时，其值都取默认值。当知道怎么分配时，按规则给auto分配空间。
这里需要注意，当左右margin取值auto时，左右是等价的，浏览器会平均分配空间。
基于上面这些，我们得出如下结论：
（auto的水平原理）：一个auto取剩余空间 两个auto取默认值 。但有一种特殊情况：当两个auto是margin值时 会平分剩余空间。
所以最后总结：
基于上面这些个特性，可以断定，块级元素在水平方向上的尺寸属性，除了margin-left和margin-right值为auto，其余皆为定值，那么margin-left和margin-right会自动平分父元素的剩余宽度，进而达到在父元素内部水平居中的效果
閱讀更多 小鄭搞碼事 的文章
