html - CSS垂直定位，未知高度

Question

我有以下菜单结构:

<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>

在这种情况下，

容器#main-nav具有真实的高度:20px;(因此.menu-main-menu-container具有它， 也)。但是当我尝试使用以下方法在 .header 中垂直定位整个菜单时:

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

#main-nav 立即获取 .header 的高度!所以，它是 height: 150px; (根据 Firebug)，我无法垂直定位它。

如何垂直放置它？这是我经常遇到的错误。当我添加 top: 0; 时底部:0；它获取父容器的高度。我不知道该菜单的高度。

Answer 1

parent 高度未知而 child 高度已知的情况: 设置 top: 50% 和 margin-top: -10px (10px = 导航高度的一半)。 演示 http://dabblet.com/gist/2819055

父子高度都未知的情况: 使用height: 100%的伪元素；伪元素和子元素(本例中为导航)上的 display: inline 和 vertical-align: middle - 演示 http://dabblet.com/gist/2819071