如何在块中显示时使用 flex 在巨型屏幕中垂直居中项目

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。

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