问题描述：在一个矩形框内使用让文字垂直居中显示，如果用flex布局会出现如图1的效果，文字会往上浮一点点，并不居中，那如何实现图2的效果呢？
图1：
字体上浮.png
图2：
字体居中.png
矩形框高度较高时：
<div>
<span>姓名</span>
</div>
div{
width: 282px;
height: 52px；//高度必须加
display: flex;
align-items: center;
span{
display:inline-block;
height: 52px;//给span给一个高度
line-height:52px;//再给一个行高可以解决垂直居中问题
flex-shrink: 0;
font-size:14px;
}
}
当矩形框高度较高时给div加一个height 再给span 给一个height和一个line-height便可以使文字垂直居中，但是当矩形框高度较小时，使用line-height不起作用，如下图1所示，那又该如何时span中文字垂直居中呢 ？
图1：
上浮.png
图2：
居中.png
矩形框高度较低时：
<div>
<span>详细介绍</span>
</div>
div{
display: flex;
justify-content: center;
align-items: center;
width: 63px;
height: 19px;//div加高度
span{
display:inline-block;
height: 19px;//span只加高度不加line-height，一定不能加
}
}
如上，当矩形框较低时，只给height,不加line-height便可以使文字居中
