Vertical and horizontal centering div inside another

Question

I am trying to center a div inside another div. I tried the following HTML and CSS

HTML

<div class="header"> <div class="homeImageText"> <h1>Document Preparation Like Never Before</h1> </div><!--homeImagetext end--> </div> 

CSS

 .homeImageText { left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%; } header{ background: url(../images/header1.png) center center no-repeat; ; height: 600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

Live jsfiddle

Answer 1

Demo script

For vertical centering, make the wrapper of the div equal to display-table , and the child element is display:table-cell with vertical-align:middle . Then horizontal centering can be done using text-align:center;

Try CSS:

 .header { height: 600px; display:table; width:100%; } .homeImageText { height:100%; display:table-cell; vertical-align:middle; text-align:center; }