垂直居中对齐容器div

Question

I'm creating a toolbar style navigation menu, where the content is added dynamically into the container.

I want to align the container div's center vertically to the center of the screen.

Here is my approach http://cssdeck.com/labs/cmwvyjud

I know that this is not how it should be, but I'm unable to find alternative ways of doing this vertical alignment. Any help is appreciated.

Answer 1

If you know the height of the content that needs to be centered you can take half of that height and use something like margin-top:-(contentHeight/2)px

See example at : http://cssdeck.com/labs/atwispr6 , here I know the content is 300px, so when I take half I have 150px. So margin-top:-150px

Edit I have updated the example, to make it dynamic

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

Answer 2

If you're looking for a pure CSS solution, you have 2 options. If you're willing to add an additional container, you could use display: table . If the markup cannot change, then Flexbox is what you're looking for.

Display: table

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>

This works in just about everything, including 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;
}

This works in Chrome, Opera, Firefox, IE10, and Safari.

Answer 3

the content is 300px, screen height is (for Ex 768px), so you must compare your content with screen height, not content itself...

so content is about 40% of screen height, and you can use top:25%; for top..

or in jQuery :

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