问题: 使用flex布局的时候发现设置 display: table-cell; vertical-align=middle;后文字并没有垂直居中
<div class=”box”>
<div class=”item”>我是一些需要垂直居中的文字</div>
<div class=”item”>我是一些需要垂直居中的文字</div>
<div class=”item”>我是一些需要垂直居中的文字</div>
</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>
</div>
.box {
display: flex;
}
.item {
width: 200px;
height: 200px;
background-color: #666;
color: #fff;
//重点
display: table;
}
.item>div {
//重点
display: table-cell;
vertical-align: middle;
}