Come centrare un elemento posizionato in modo assoluto?

Question

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

Ho un messaggio div pop, sarà sul livello superiore e posizionerà il centro della pagina.

tuttavia se si imposta position:absolute; z-index:99; sarà in cima ma margin:0 auto; non funzionerà.

come posso tenerlo in cima al livello e visualizzare anche al centro?

Answer 1

Centrare un elemento con position: absolute; applicato funziona utilizzando due elementi nidificati (demo).

1. Il primo elemento sarà posizionato assolutamente per posizionarlo al di sopra di tutti gli altri elementi
2. Il secondo elementofunziona proprio come ci si aspetterebbe che: Usa margin: 0 auto; per centrare esso.

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; 
}