In CSS, vertically centering an element within its parent isn't always an easy thing, and this is why Javascript can help here. Simply paste the following code in a separate .js file or in the head section of your html document:
Code
function AlignMiddle(Parent,Child) {
//Generate content dynamically
document.getElementById(Child).innerHTML="Hello there, I am dynamically align in the middle using a Javascript."
//Center Vertically
h = document.getElementById(Child).offsetHeight;
//var a=Math.round(document.getElementById(Parent).style.pixelHeight/2);
var a=Math.round(parseInt(document.getElementById(Parent).style.height)/2);
var b=Math.round(h/2);
var c=a-b;
document.getElementById(Child).style.top=c+"px";
//Center Horizontally
w = document.getElementById(Child).offsetWidth;
//var x=Math.round(document.getElementById(Parent).style.pixelWidth/2);
var x=Math.round(parseInt(document.getElementById(Parent).style.width)/2);
var y=Math.round(w/2);
var z=x-y;
document.getElementById(Child).style.left=z+"px";
}
