div内 span文字垂直居中探索

问题描述：在一个矩形框内使用让文字垂直居中显示，如果用flex布局会出现如图1的效果，文字会往上浮一点点，并不居中，那如何实现图2的效果呢？

图1：

字体上浮.png

图2：

字体居中.png

矩形框高度较高时：

      

            姓名
       

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{
       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便可以使文字居中