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");
    });

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+

弹性盒

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

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

所以内容大约是屏幕高度的 40%，你可以使用top:25%;top..

或在 jQuery 中：

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