问题: 使用flex布局的时候发现设置 display: table-cell; vertical-align=middle;后文字并没有垂直居中

<div class=”box”>
<div class=”item”>我是一些需要垂直居中的文字</div>
<div class=”item”>我是一些需要垂直居中的文字</div>
<div class=”item”>我是一些需要垂直居中的文字</div>
.box {
display: flex;
.item {
width: 200px;
height: 200px;
background-color: #666;
color: #fff;
display: table-cell;
vertical-align: middle;
解决办法: 子元素里面再嵌一个div标签，给子元素添加display:table;,新添加的孙元素使用display: table-cell; vertical-align: middle;
 
<div class=”box”>
<div class=”item”><div>我是一些需要垂直居中的文字</div></div>
<div class=”item”>我是一些需要垂直居中的文字</div>
<div class=”item”>我是一些需要垂直居中的文字</div>
.box {
display: flex;
.item {
width: 200px;
height: 200px;
background-color: #666;
color: #fff;
display: table;
.item>div {
display: table-cell;
vertical-align: middle;
                    问题: 使用flex布局的时候发现设置 display: table-cell; vertical-align=middle;后文字并没有垂直居中&lt;div class=”box”&gt;&lt;div class=”item”&gt;我是一些需要垂直居中的文字&lt;/div&gt;&lt;div class=”item”&gt;我是一些需要垂直居中的文字&lt;/div&gt;&lt;div class=”item”&gt;我是一些需要垂直居中的文字&lt;/div&gt;&lt;.
				
今天，遇到了一个超级坑的问题，解决了超级久没找到解决方法，各种百度，终于在茫茫的答案中找到了，太不容易了，泪奔~~
因此赶紧在这里记录下！！！！！
问题：一级父元素采用flex布局，但是没有设置高度，他有三个子元素，父元素的高度是有第三个子元素的高度撑开的，现在的情况是，需要让第一个子元素的高度和父元素一样高，但是现在如果是设置第一个子元素的高度为100%,是不会生效的
解决：设置...
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
				
如上图所示，在flex布局中，无论某列存在多行可能，我们始终要保持同一行数据高度居中问题。
line-height只能解决单行问题，所以我们可以利用css3的transform属性来解决。
如果li 元素设为flex, 那么直接包裹子元素会转化为块级元素，和li等高，就无法实现居中， 所以我们多套一层，用span元素直接包裹内容，获取到内容真正高度。就可以transform了。
position: relative;
span {
position: absolute;
top: 50%;
在上面的代码中，`.parent`代表父元素的类名，通过设置`display: flex;`将其设定为flex容器。然后，使用`align-items: center;`将子元素在垂直方向上居中对齐。
希望这个回答对您有所帮助！如果您还有其他问题，请随时提问。