html - 垂直居中对齐容器 div

Question

我正在创建一个工具栏样式的导航菜单，其中的内容动态添加到容器中。

我想将容器 div 的中心垂直对齐到屏幕的中心。

这是我的方法 http://cssdeck.com/labs/cmwvyjud

我知道这不应该是这样，但我无法找到其他方法来进行这种垂直对齐。感谢您的帮助。

Answer 1

如果您知道需要居中的内容的高度，您可以取该高度的一半并使用类似 margin-top:-(contentHeight/2)px

参见示例:http://cssdeck.com/labs/atwispr6 ，这里我知道内容是 300px，所以当我取一半时我有 150px。所以 margin-top:-150px

编辑我更新了示例，使其动态化

    $(function(){
        var $container = $("#container")    
        $container.css("margin-top", "-" + ($container.height()/2) + "px");
    });