使用Flexbox在<body>中居中元素时为何无法垂直排列？

问题场景 #

想要居中两个元素，使用Flexbox为<body>设置display: flex和justify-content: center后，原本垂直排列的元素变成了横向排列，代码如下：

HTML代码

<body>
    <h1>This is the title</h1>
    <div>This is a paragraph</div>
</body>

CSS代码

body {
    display: flex;
    justify-content: center;
}

原因解释 #

这是Flexbox的默认特性导致的：

• 当元素被设置为display: flex后，它就成为了Flex容器，直接子元素会自动变成Flex项目。
• Flex容器默认的主轴方向是水平（row），所有Flex项目会沿着主轴方向排列。而<h1>、<div>这类块级元素在默认文档流里是占满一行、自然垂直堆叠的，所以启用Flex布局后就会变成横向排列。
• 如果想保持垂直排列同时实现居中，只需给Flex容器添加flex-direction: column属性，把主轴改成垂直方向，再配合align-items: center就能完成水平居中。

修正代码示例 #

如果要实现垂直排列且水平居中，CSS可修改为：

body {
    display: flex;
    flex-direction: column; /* 设置主轴为垂直方向 */
    align-items: center; /* 沿水平方向居中 */
}

内容的提问来源于stack exchange，提问作者Sam Lee