将垂直列表放在div中，到达所述DIV的中心

Question

我正在使用我正在处理的一些代码遇到一些问题。我希望菜单中的列表始终相对于菜单div垂直居中。我已经尝试过这里找到的各种解决方案，但列表总是最终位于div的顶部。可以吗？理想情况下，即使没有固定的高度，它也必须工作。

这是CSS：

Answer 1

您还可以考虑使用line-height来实现此目标（如果菜单是div中唯一的内容）。

See fiddle here

---

例如：将高度为200px添加到#menu，并将行高200像素添加到#menu ul

Answer 2

您可以尝试转换ul和li元素以显示为内联块元素。并将垂直对齐设置为中间

ul, li {
    display:inline-block;
    vertical-align:middle;
    }

Answer 3

一种常见的技巧是将display: table;用于父级，将display: table-cell;用于子级。然后，您可以将vertical-align: middle;应用于孩子。

这是code example

Answer 4

您可以考虑将display: flex;应用于#menu。

See fiddle