전체 화면 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%; 

내부 사업부 :

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

그러나 깨끗하지 않다 - 나는 창 크기를 조정 특히. 그리고 이것은 어떻게 든 세로 중심에 있지 않습니다.

도와 주시겠습니까?

감사합니다.

Answer 1

쉬운 수정은 다음과 같습니다

는하지만 '0 자동차'의 마진 그런 다음 상단과 하단 따라

을 조정할 수 있습니다 사업부

innerdiv { 
margin:0 auto; 
} 

을 중심으로하는 올바른 방법입니다

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

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>