html - 垂直居中的嵌套 DIV

Question

有没有办法在纯 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>并显示:table-cell 到 <li>元素。

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

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

有没有办法做到这一点:

1. 不 改变上面的 HTML 结构？这通常是 WordPress 等 CMS 中菜单的默认结构，有时我们无法更改它；
2. 在纯 CSS 中，没有 jQuery 的帮助；和
3. 在所有现代浏览器中工作？

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

谢谢

Answer 1

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

Vertical Align

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.