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 应用于 <ul> 并将 display:table-cell 应用于 <li> 元素。

但是在这些 <li> 元素中，我还希望元素垂直居中。这很重要，因为在响应式设计中，我们不知道 <a> 元素中的文本何时会流到两行或包含在一行中。例如。上面的主页链接只会占用一行，而产品和服务链接会占用两条较小的宽度。

现在，我们不能在这里使用表格技巧，因为这里的父元素 <li> 有 display:table-cell，而不是 display:table。

有没有办法做到这一点:

没有 改变上面的 HTML 结构？这通常是 WordPress 等 CMS 中菜单的默认结构，有时我们无法更改它；

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

可以在所有现代浏览器中工作吗？

(请不要建议对 <li> 元素使用非表格布局。上面的例子只是:一个例子；问题仍然存在:我们可以垂直居中立即嵌套的 div 吗？)

谢谢

最佳答案

为什么不简单地将 vertical-align:middle; 添加到带有 li 集的 display:table-cell; 元素。

Vertical Align

关于html - 垂直居中的嵌套 DIV，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22532813/