절대적으로 배치 된 요소를 가운데에 배치하는 방법은 무엇입니까?

Question

div { 
    width: 400px; 
    height: 400px; 
    background: yellow; 
    z-index: 99; 
    margin: 0 auto; 
} 

div 팝업 메시지가 있습니다. 페이지 중간에 최상위 레이어와 위치에 표시됩니다.

그러나 내가 position:absolute; z-index:99;으로 설정하면 상단에 있지만 margin:0 auto; 실무실에서 작동하지 않습니다.

어떻게하면 레이어 위에 유지하고 중간에 표시 할 수 있습니까?

Answer 1

두 개의 중첩 요소 (demo)를 사용하여 position: absolute;이 적용된 요소 가운데에 적용됩니다.

1. 첫 번째 요소당신이 그것을 기대처럼
2. 두 번째 요소 그냥 작동 다른 모든 요소 위에 배치 절대적 위치에있을 것입니다 : 사용 margin: 0 auto;을에게 그것을 중앙에.

HTML :

<div class="outer-div"> 
    <div class="inner-div"> 
     <p>This is a modal window being centered.</p> 
    </div> 
</div> 

CSS :

.outer-div { 
    position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
    z-index: 13; 

    /* 
    * Setting all four values to 0 makes the element as big 
    * as its next relative parent. Usually this is the viewport. 
    */ 
} 

.inner-div { 
    margin: 0 auto; 
    width: 400px; 
    background-color: khaki; 
}