垂直居中对齐容器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");
    });

Answer 2

如果您正在寻找纯CSS解决方案，则有2个选项。如果您愿意添加其他容器，则可以使用display: table。如果标记无法更改，那么Flexbox就是您所需要的。

显示：表格

http://cssdeck.com/labs/jdzltkla

body{
    background-color:black;
}

#container{
    position: fixed;
    display: table;
    top: 0;
    bottom: 0;
    left: 10px;
}

.foo {
    display: table-cell;
    vertical-align: middle;
}

#container .foo > * {
    width: 50px;
    height: 50px;
    background-color:white;
    margin-bottom: 10px;
}

<div id="container">
    <div class="foo">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

这几乎适用于所有事情，包括IE8 +

Flexbox的

http://codepen.io/cimmanon/pen/sKqkE

body {
  background-color: black;
}

#container {
  position: fixed;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  top: 0;
  bottom: 0;
  left: 10px;
}

#container * {
  width: 50px;
  height: 50px;
  background-color: white;
  margin-bottom: 10px;
}

适用于Chrome，Opera，Firefox，IE10和Safari。

Answer 3

内容为300px，屏幕高度为（Ex 768px），因此您必须将内容与屏幕高度进行比较，而不是内容本身......

因此内容约占屏幕高度的40％，您可以使用top:25%;作为顶部..

或在jQuery中：

var container_height = parseInt($("#container").css("height"));
$("#container").css("top", (parseInt((screen.height-container_height)/2))+"px");