flex布局，子元素父元素同高度，子内文字垂直居中

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

 

我是一些需要垂直居中的文字

我是一些需要垂直居中的文字

我是一些需要垂直居中的文字

.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;

 

我是一些需要垂直居中的文字

我是一些需要垂直居中的文字

我是一些需要垂直居中的文字

.box {
display: flex;
}
.item {
width: 200px;
height: 200px;
background-color: #666;
color: #fff;

//重点
display: table;
}
.item>div {

//重点
display: table-cell;
vertical-align: middle;
}