垂直和水平居中一個div在另一個

Question

我想中心一個div在另一個div內。 我曾嘗試以下HTML和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 Fiddle

對於垂直居中，使包裝div設置爲display-table和孩子display:table-cell與vertical-align:middle。水平居中就可以簡單地用text-align:center;

完成試用CSS：

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