ul li 下的元素内容垂直居中

CSS:

<style>
        * { padding: 0; margin: 0; }
        li { list-style: none; }
            li span { border: 1px solid red; height: 100px; vertical-align: middle; display: table-cell; width: 100px;text-align:center; }
    </style>

HTML:

 <ul>
        <li><span>无可奈何花落去</span></li>
        <li><span>我的收藏</span></li>
    </ul>