How to vertically align content in div

For <strong>vertically align content in div</strong> 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.

HTML

<div id="parent-div">
	<div id="child-div">This is a content vertically align in div.</div>
</div>

CSS

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