在全屏div內居中div

Question

我需要在全屏div內垂直居中和垂直div（未定義寬度）。

我有下面的代碼。

外格：

background: #000 url('header.jpg') no-repeat center center /* fixed */; 
background-size: cover; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
height: 100%; 
position: relative; 
text-align: center; 
width: 100%; 

內的div：

left: 50%; 
margin-top: -300px; 
margin-left: -300px; 
max-width: 600px; 
position: absolute; 
top: 50%; 
z-index: 2; 

但它不乾淨 - 尤其是當我調整窗口的大小。這在某種程度上不是垂直居中。

你能幫我解決嗎？

謝謝！

Answer 1

最簡單的解決方法是：

<outerdiv><center><innerdiv></div></center></div> 

但「0汽車」的利潤率是居中的div

innerdiv { 
margin:0 auto; 
} 

然後，您可以調整的頂部和底部相應

的正確方法

Answer 2

在這種情況下不要使用position:absolute。您不必使用z-index，因爲默認情況下，孩子將始終保持在父母面前。這不是你的情況，因爲父母是relative，子女absolute和position:relative給父母提供了更大的堆疊順序。

因此，如果您的內部div爲父級的寬度和高度的50％，請編寫top:25%和margin:0 auto;

如果是70％：top:15%; margin:0 auto;

html, body{ 
 
width:100%; 
 
    height:100%; 
 
} 
 
.outer{background: #000 url('http://lorempixel.com/g/400/200/') no-repeat center center /* fixed */; 
 
background-size: cover; 
 
-webkit-background-size: cover; 
 
-moz-background-size: cover; 
 
-o-background-size: cover; 
 
height: 100%; 
 
position: relative; 
 
text-align: center; 
 
width: 100%; 
 

 
} 
 
.inner{ 
 
height:50%; 
 
width: 50%; 
 
position: relative; 
 
top: 25%; 
 
background:red; 
 
    margin:0 auto; 
 
    
 
}

<div class="outer"> 
 
<div class="inner"> 
 
    
 
    </div> 
 
</div>