css - 在块中显示时，如何使用 flex 在 Jumbotron 中垂直居中项目？

Question

我试过这个将所有项目垂直居中在一个 Jumbotron 中，

display: flex;
justify-content: center;
align-items: center;

但问题是所有项目都排成一行，就像它们内联显示一样。您如何将它们垂直居中，同时仍以块的形式显示它们。

Answer 1

由于block元素垂直堆叠，将 flex 方向更改为column，flex 项目也将如此。

display: flex;
flex-direction: column;              /*  added  */
justify-content: center;
align-items: center;

Answer 2

除了上面的答案，您还可以将文本元素居中，例如h1，p或a通过将 text-align 设置为居中。

display: flex;
flex-direction: column;              
justify-content: center;
align-items: center;                    /*  aligning items  */
text-align: center;                     /*  aligning text  */