CSS 实现多行span文字在div，li中居中问题

实现效果：

效果解析：

<ul>
    <li class="menu-item">
         <span class="text">
            热销榜
         </span>
     </li>
 </ul>

.menu-item
        display table
        padding 0 12px
        width 56px
        .text
          display table-cell
          vertical-align middle
          

display:table是将li设置为table布局，display：table-cell则将span设置为类似于td，之后设置vertical-align：middle效果则为设置行内元素放置在父元素中部，则实现垂直。