1、居中原理
首先应明白：一个块级盒子盒子会占据(不单单指宽度)父容器的宽度，当width:auto时它的宽度会和父容器一样宽。
1.1水平居中
而当width:100px，margin:0 auto;时，剩余空间将被平均分配给margin-left,margin-right。这样就实现了水平居中。
当然我们也可以只设置margin-left:auto。
设置成margin-left:auto，margin-right:100px呢。先计算固定值，然后auto
1.2垂直居中
既然margin:0 auto;可以水平居中，那垂直方向上margin auto 0;呢
为何没有垂直居中？
注意第这句话一个块级盒子盒子会占据(不单单指宽度)父容器的宽度
所以只要我们使盒子占据父容器的高度就可以做到垂直居中了。
1.2.1如何占据父元素的高度
1.2.1.1定位
父元素：position:relative;
子元素：position:absolute;top:0;bottom:0;margin:auto 0;
如果我们设置子元素的height:auto;它的高度会和父元素的高度一样。
如果不设置bottom呢？因为子元素没有占据父元素的高度，所以auto分配的高度为0，子元素不会出现。
1.2.1.2flex
父元素：display:flex;
子元素：margin:auto 0;
1.3水平垂直居中
1.3.1定位
父元素：position:relative;
子元素：position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;
1.3.2flex
父元素：display:flex;
子元素：margin:auto;
2、总结
当margin：auto不生效时，想下居中原理子元素是否占据(不单单指宽度)父容器的宽/高度
