探秘 flex 上下文中神奇的自动 margin

为了引出本文的主题，先看看这个问题，最快水平垂直居中一个元素的方法是什么？

水平垂直居中也算是 CSS 领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这种应该算是最便捷的了：

<div class="g-container">
    <div class="g-box"></div>
</div>
复制代码

.g-container {
    display: flex;
}

.g-box {
    margin: auto;
}
复制代码

上面的 display: flex 替换成 display: inline-flex | grid | inline-grid 也是可以的。

CodePen Demo -- 使用 margin auto 水平垂直居中元素

如何让 margin: auto 在垂直方向上居中元素

嗯。这里其实就涉及了一个问题，如何让 margin: auto 在垂直方向上生效？

换句话说，传统的 display: block BFC（块格式化上下文）下，为什么 margin: auto 在水平方向可以居中元素在垂直方向却不行？

通常我们会使用这段代码：

div {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}
复制代码

让元素相对父元素水平居中。但是如果我们想让元素相对父元素垂直居中的话，使用 margin: auto 0 是不生效的。

BFC 下 margin: auto 垂直方向无法居中元素的原因

查看 CSS 文档，原因如下，在 BFC 下：

If both margin-left and margin-right are auto, their used values are equal, causing horizontal centring.

—CSS2 Visual formatting model details: 10.3.3

If margin-top, or margin-bottom are auto, their used value is 0.

—CSS2 Visual formatting model details: 10.6.3

简单翻译下，在块格式化上下文中，如果 margin-left 和 margin-right 都是 auto，则它们的表达值相等，从而导致元素的水平居中。( 这里的计算值为元素剩余可用剩余空间的一半)

而如果 margin-top 和 margin-bottom 都是 auto，则他们的值都为 0，当然也就无法造成垂直方向上的居中。

使用 FFC/GFC 使 margin: auto 在垂直方向上居中元素

OK，这里要使单个元素使用 margin: auto 在垂直方向上能够居中元素，需要让该元素处于 FFC(flex formatting context)，或者 GFC(grid formatting context) 上下文中，也就是这些取值中：

{
    display: flex;
    display: inline-flex;
    display: grid;
    display: inline-grid;
}
复制代码

FFC 下 margin: auto 垂直方向可以居中元素的原因</