7.4：margin：auto为什么不能实现垂直居中

问题：
margin：0 auto可以实现水平居中，但是margin: auto 0;为何不能垂直居中?
margin: 0 auto 0 0;如果只设置一个margin会发生什么?
总结：margin：0 auto可以实现左右居中，因为块级元素自动占满父元素整行。margin：auto 0不能实现垂直居中，因为块级元素不默认占满父元素整个高度，他的高度是定数，如果父元素除了子元素高度还有剩余高度，这剩余高度不属于子元素。如果想通过margin来设置上下居中，必须给子元素设置position：absolute。
另外对margin：0 auto想起效果必须有width做出解释：如果子元素没有设置width，那么子元素的width默认和父元素的width一样，所以这时候就不存在所谓的剩余空间（即父宽度-子宽度），那这时候auto就不能起作用。
首先如果想要设置居中,width是必须设置的,如果不设置width元素,那么块级元素一定会占据100%的宽度,margin:0 auto的auto是指平分剩余空间,比如宽度为200,父元素的宽度为1000,那么auto就是指水平方向平分剩余的宽度(1000-200/2)
div{
height: 200px;
width: 200px;
background: red;
margin: 0 auto;
}

那么如果只有一侧设置了auto会产生什么效果
div{
height: 200px;
width: 200px;
background: red;
margin-left: auto;
}

他竟然靠在了右侧

• 因为他只设置了左侧为auto,那么父元素剩余的空间都会分给左侧,就实现了float:left;的效果做到了这一步我感觉实在是太神奇了啊,他竟然可以代替浮动的效果

那么如何垂直方向居中呢
这里面我要强调一下,垂直方向不可以margin: auto 0
主要的原因就是垂直方向,我们没有剩余的空间。什么意思？我们知道，块级元素即使设置了宽度，也会占满一行，为什么会这样?
因为默认的宽度规则是“适应于父级”规则（在水平方向上自动扩充）。
但是在垂直方向上，块级元素不会自动扩充，它的外部尺寸没有自动充满父元素，也没有剩余空间可说。所以margin：auto不能实现垂直居中。

那么我们就不能垂直方向居中了吗???,当然是可以的,我们来试一下
div{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 200px;
width: 200px;
background: red;
}

原理: 如果设置了绝对定位并且上下左右全部为0(不能只设置上左或者其他的任意两方向),那么他会填充整个父元素的所有可用空间,那么auto就有了作用,会平均分配剩余的空间 （因为只设置上左并不能获得父元素右下的空间）