Flex项目中文本的垂直对齐不起作用，但添加父属性完成了工作，为什么？

Question

Plz在将此问题标记为重复或可能重复之前等待。
我将child item垂直居中对齐但child item的内容即文本未在中心对齐最初的盒子。但是当我添加display:flex;时， justify-content:center;＆amp; flex-direction:column;内child class，文字垂直居中。

我检查了这些问题：
How to vertically align text inside a flexbox?
Is there a way to change the vertical-align of items inside flex-items?

一些答案帮助我垂直对齐child item，但没有提到如何将child的内容对齐在其中间的垂直中心。

HTML

<div class="flex-container">
<div class="flex-item">hello hello hello hello </div>
</div>

CSS 之前

.flex-container {
display: flex;    
justify-content:center;
align-items:center;
width: 300px;
height: 300px;
background-color: lightgrey;
text-align:center;
}

.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;

结果是：

添加 display:flex;后

， justify-content:center;＆amp; flex-direction:column;

CSS 之后

 .flex-item {
     background-color: cornflowerblue;
     width: 100px;
     height: 100px;
     display:flex;  //<---- added property supposed to be work on parent 
     justify-content:center; //<---- added property supposed to be work on parent
     flex-direction:column;  //<---- added property supposed to be work on parent

结果是：

我想知道是否有其他方法使用flexbox来对齐垂直中心的儿童内容。另外，为什么要添加父属性，即display:flex;， justify-content:center;＆amp; flex-direction:column;曾在child class工作过？是不应该应用这些属性＆amp;只在父母身上工作？

Answer 1

Flex项目本身也可以是flex容器，这就是解决方案工作的原因。这是因为您的子项也是其中文本节点的父项。但是，如果您不希望它是flex-container，您也可以使用属性

vertical-align: center;

在flex项目上