How to vertically align content in div

For vertically align content in div you must set display property to table to your parent div and table-cell to child div. you can vertically align content according to your need i.e Top, Middle, Bottom.

CSS

#parent-div
{
 width:300px;
 height:300px;
 background:#ccc;
 display:table;
}
#child-div
{
 display:table-cell;
 vertical-align:middle;
 text-align:center;
}

HTML

 
This is a content vertically align in div.

Download File Used in this example View Live Demo