为何flex布局下的div仅水平居中，无法实现垂直居中？

Flex布局中align-items: center要实现垂直方向居中，必须满足一个前提：flex容器本身有明确的、比内部内容更大的高度。
你写的#login-form没有设置任何高度，默认高度是被内部的表单内容撑起来的，容器和内容高度完全一致，当然看不到垂直居中的效果。另外浏览器默认的html、body标签本身没有高度，不会自动占满整个浏览器窗口，这也是垂直居中不生效的常见连带问题。

• 先清除浏览器默认的外边距，同时让html、body标签占满整个浏览器视口高度：

html, body {
    margin: 0;
    height: 100%;
}

• 给#login-form设置高度，让它占满父元素（也就是body）的全部高度，你之前写的flex相关属性不用改：

#login-form {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

如果你不需要表单在整个浏览器窗口居中，只需要在某个固定高度的区块内居中，只需要给对应的flex容器设置明确的高度值即可，不需要修改html和body的样式。

内容的提问来源于stack exchange，提问作者JHOSEF NASCIMENTO