Html 垂直居中嵌套div

有没有办法在纯CSS中垂直居中n个嵌套div

以无序列表为例：

<ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Products & Services</a>
    </li>
    <li>
        <a href="#">Contact Us</a>
    </li>
</ul>

我希望列表水平显示在响应性强的网站上。为此，我将使用表格布局，将display:table应用于

，将display:table单元格应用于

元素

但是在这些

元素中，我还希望元素垂直居中。这一点很重要，因为在响应式设计中，我们不知道

元素中的文本何时会流入两行或包含在一行中。例如，上面的Home link仅占用一条线路，而Products&Services link将占用两条较小宽度的线路

现在，我们不能在这里使用table技巧，因为这里的父元素有display:table单元格，而不是display:table

有没有办法做到这一点：

而不更改上面的HTML结构？这通常是像WordPress这样的CMS中菜单的默认结构，有时我们没有更改它的选项

在纯CSS中，没有jQuery的帮助；及

在所有现代浏览器中工作

（请不要建议对

元素使用非表布局。上面的示例只是：一个示例；问题仍然存在：我们可以立即垂直居中嵌套div吗？）

---

谢谢

为什么不简单地添加

垂直对齐：中间到具有
显示的
li
元素：表格单元格设置


“垂直对齐CSS”属性指定对象的垂直对齐方式
内联或表格单元格框

试试这个CSS：

li {
display:table-cell;
vertical-align:middle;
}

是带有
显示的元素：表格单元格
必须使用
display:table
？当我提到使用上面的table技巧时，它已经暗示了使用垂直对齐：中间。然而，问题仍然存在。因为考虑了在<代码> <代码>标签中有<代码> <代码>标签的情况。Sergey：请阅读我问题的最后一行：（请不要建议对
元素使用非表布局。上面的示例只是：一个示例；问题仍然存在：我们可以立即将嵌套的div垂直居中吗？@Seano为什么不：
li*{vertical align:middle}
当我提到使用上面的表格技巧时，它已经暗示了使用垂直对齐：中间。问题仍然存在。@Seano那么问题应该是，“我有
垂直对齐：中间；
但它不起作用”。我用一个有效的例子更新了我的答案。适用于我试用过的所有浏览器（IE9到IE11、Chrome、Firefox）。