Css 在列表中垂直居中显示为表格行的内容

我正在创建垂直页面导航。我知道确切的高度（300px），将有5个项目（所有项目可能有不同的大小，但没有一个将超过60px的高度）

我想要实现的是在它们的表行中垂直居中显示所有项目，这里是fiddle:

HTML

在水平方向上，它工作得很好：，但我希望它也是垂直的。

从代码开始，只是稍微修改了一下。必须将每个单元格内容包装在

span

中，并将其设置为

display:table单元格

，移动到此选择器时，还会显示有关

高度

和

垂直对齐

的属性（我还添加了一个红色边框以突出显示中间对齐）。下面是修改后的代码：

HTML

<div class="wrapper">
    <ul>
        <li><span>Item 1</span></li>
        <li><span>Item 2</span></li>
        <li><span>Item 3</span></li>
        <li><span>Item 4</span></li>
        <li><span>Item 5<br />Item 6</span></li>
    </ul>
</div>

---

出于对一切神圣事物的热爱，不要为此滥用桌子。Flexbox是您的救星，无论是菜单布局本身，还是完美的双向居中。考虑以下样本：

.wrapper{
背景色：#EEE；
}
李先生{
保证金：0；
填充：0；
}
保险商实验室{
显示器：flex；
弯曲方向：立柱；
}
李{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：60px；
宽度：120px；
边框：1px点黑色；
}

项目1
项目2
项目3
项目4
项目5
项目6

.wrapper {
    height: 300px;
    background-color: #EEE;
}

ul {
    display: table;
}

ul li {
    display: table-row;
    height: 60px;
}

<div class="wrapper">
    <ul>
        <li><span>Item 1</span></li>
        <li><span>Item 2</span></li>
        <li><span>Item 3</span></li>
        <li><span>Item 4</span></li>
        <li><span>Item 5<br />Item 6</span></li>
    </ul>
</div>

ul li {
    display: table-row;
}

ul li span {
    display: table-cell;
    height: 60px;
    border:solid 1px red;
    vertical-align:middle;
}