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

Question

我试过将所有项目垂直居中放置在 Jumbotron 中，

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

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

Answer 1

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

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  */