神奇的 margin: auto

[MengZhaoFly]

margin: 0 auto

实际的开发中，当我们想要水平居中某个元素时，可以把它的 margin 设为。
为什么设置 auto 可以让元素相对于父元素水平居中。

和 auto 这个属性的取值有关。auto 在任何情况下，只会取下面两种值中的一个：

• 父元素剩余空间的宽度
• 0

何时取1，何时取2？

这是由元素的布局方式决定的：

• 当元素的布局方式为 static/relative 且宽高已知时，auto 取1中的值；
• 当元素的布局方式为 postion/absolute/fixed 或者 float/inline 或者宽高未知时，auto 就取 2中的值。

注意，以上 auto 的取值均指水平方向，垂直方向上，auto 不会自动填充。

可以从 mdn：https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left 得到详细结论。

如何利用 auto 实现元素的垂直居中

流体特性：当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。
流体特性的妙处，在于元素可自动填充父级元素的可用尺寸。

当流体特性发生时，我们可以给水平/垂直方向的对立定位（也就是 left、right、top、bottom）各设定一个值，然后将水平/垂直方向的 margin 均设为 auto，这样一来，auto 就会自动平分父元素的剩余空间了。

#center {
  background-color: red;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

这里的 left、right、top、bottom 的值其实没有实际的大小描述意义。我们只要确认其存在性就行，就算不是 0，也可以激发其流体特性.