最方便的水平垂直居中布局方法

• 核心点
  使用了FFC/GFC 使 margin: auto 在垂直方向上居中元素。

• 原因如下：
  在弹性项目上的自动边距的效果与块流中的自动边距非常相似：
  1、在计算弹性基数和弹性长度时，自动边距被视为 0；
  2、在通过 justify-content 和 align-self 进行对齐之前，任何正的可用空间都会分配到该维度中的自动边距。
  3、溢出的盒子会忽略它们的自动边距并在末端方向溢出。

  注意：如果可用空间分配给自动边距，则对齐属性将在该尺寸中不起作用，因为边距将窃取弯曲后剩余的所有可用空间。

• 重点
  margin auto 的生效不仅仅是方向，垂直方向同样水平自动去分配这个剩余空间。

例如

html:

<div class="container">