Vertikale und horizontale Zentrierung ein div in einem anderen

Question

Ich versuche, ein Div in einem anderen div zu zentrieren. Ich habe folgende HTML und CSS versucht

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 Fiddle

Für vertikale Zentrieren, machen Sie die Verpackung div auf display-table und das Kind auf display:table-cell mit vertical-align:middle. Horizontale Zentrierung kann dann einfach mit text-align:center;

die CSS-Versuchen erreicht werden:

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