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>

Container #main-nav 在这种情况下有真实的 height: 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 在伪元素和子元素(本例中为 nav)上 - 演示 http://dabblet.com/gist/2819071