Vertically center align container div - html

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