Html CSS垂直定位，不知道高度

我有以下菜单结构：

<div class="header" style="height: 150px;">
    <nav id="main-nav">
        <div class="menu-main-menu-container">
            <ul id="menu">
                <li>menu item 1</li>
                <li>menu item 2</li>
            </ul>
        </div>
        <div class="clear"></div>
    </nav>
</div>

#主导航

立即获得

标题的高度

！所以，它的高度是150px（根据Firebug）并且我无法垂直定位它

---

我如何垂直定位它？这就是我经常碰到的错误。当我添加top时：0；底部：0；它获取父容器的高度。我不知道菜单的高度。

我想你指的是水平居中。在这种情况下，你不能这样做，如果你的身高是未知的CSS只。不过，您可以使用jQuery来实现这一点。看看小提琴

---

它计算菜单的高度，然后计算菜单的位置。

当父菜单的高度未知而子菜单的高度已知时的情况： 设置

top:50%

和

margin top:-10px

（

10px

=导航高度的一半）。 演示

父母和孩子的身高都未知的情况：

---

使用高度为100%的伪元素<代码>在伪元素和子元素（本例中为导航）上显示：内联&

垂直对齐：中间

）-demo

当添加顶部：0，底部：0时，您将强制它为容器的高度AM为正确。这不是一个bug，这正是它应该如何工作的。给出一个绝对定位元素

top:0；底部：0

是一种为该元素指定父元素高度的方法。我不明白的是你想把它放在页眉的什么位置。页眉的确切位置？垂直居中？在底部？

#main-nav {
    bottom: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}