margin: auto；在标准流中为什么无法实现垂直居中？

margin: auto;在标准流中为什么无法实现垂直居中？

1.首先给一子盒子设置margin: auto;会发生？

代码

      .father{ 
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .son{ 
            background-color: red;
            width: 150px;
            height: 150px;
            margin: auto;
        }

很显然子盒子在父盒子中只实现了水平居中并未实现垂直居中。

那为什么没有实现垂直居中呢？在讲之前需要知道什么是标准流。

2.标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。

常见标准流排版规则：

1. 块级元素：从上往下，垂直布局，独占一行
2. 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行

好了那我们进入正题，来研究研究这个auto到底做了什么。

3.auto

auto表示自动填充剩下多余的空间。下面我们举个栗子

      .father{ 
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .son{ 
            background-color: red;
            width: 150px;
            height: 150px;
            margin-left: auto;
        }

看给margin-left:auto,子元素就会靠右显示，左边的剩余空间全部自动填充了。

所以水平方向的居中也就很好解释了，当我们给块级元素设置margin:0 auto;时。在水平方向margin会填充元素除border，width，padding的剩余空间，如果设置为auto，会实现平分剩余空间实现水平居中。

那为什么垂直不行了呢？

我们用浏览器检查工具，看一下.son盒子会发现

它在水平方向是有扩充的，在黑线的那片橘色区域。这一方面也显示了块级元素的特性，独占一行。块级元素即使设置了宽度，也会沾满一行，因为默认的宽度规则是‘适应于父级’规则（在水平方向自动填充）。所以水平方向设置auto，可以自适应填充剩余空间实现居中。

很显然在垂直方向块级元素不会自扩充，.son盒子下面没有橘色区域，外部尺寸也没能自动充满父元素，所以没有空间用来auto。那垂直方向无法相对于父盒子进行居中。

为什么absolute可以实现垂直居中？

首先看一下代码

 .father{ 
            width: 300px;
            height: 300px;
            background-color: pink;
            position: relative;
        }
  .son{ 
            background-color: red;
            width: 150px;
            height: 150px;
            margin-left: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

这个也许并不能让你理解，那我们在看一下检查

细心的你可能会发现橘色区域充满了整个盒子，这让margin：auto可以在水平和垂直方向都有可以自适应填充的空间，从而实现水平垂直方向上的居中。

这时你可能会有疑问，这是怎末做到的呢？是因为定位吗，是因为那四个方位的0吗？

答案是它们共同作用的结果，四个方向，两组对立方向的定位触发了绝对定位的流体性，从而铺满了整个父元素的所有空间。

同样前面块级元素也可以用流体性来解释，只不过块级元素是水平方向的流体性，实现水平方向的填满。
想了解更多关于绝对定位的流体性，可以看看这篇博客绝对定位

4.总结

如果你能理解上文所说，那也就能真正明白为什么块级元素水平居中可以用margin：auto，而行内元素无法使用margin：auto来水平居中。

究其根本还是标准流在作祟。