CSS Vertically & Horizontally Center Div

Question

Ho un pop-up che contiene un modulo ASP.NET, fare clic sul collegamento "Richiedi informazioni" e il modulo viene visualizzato.

Tuttavia, le pagine che presentano il collegamento "Richiedi informazioni" per attivare il pop-up hanno un sacco di contenuti quindi è necessario scorrere per vedere il collegamento.

Ho bisogno di avere il div sempre centrato se un utente scorre per leggere il contenuto, altrimenti se non scorre il pop-up appare ancora centrato sullo schermo.

Il div è posizionato in modo assoluto, l'intera larghezza della pagina è 960px con il margine impostato su 0 auto.

Answer 1

Se il div ha una larghezza fissa e l'uso altezza: (se width = 120px e height = 80px)

position: fixed; 
top: 50%; 
left: 50%; 
margin-left: -60px; /* negative half of the width */ 
margin-top: -40px; /* negative half of the height */ 

Answer 2

Utilizzare una posizione: fissa; per questo, usa 0 per top, left, right e bottom, e dai al div un display: table-cell; inoltre, in questo modo, imposta text-align: center; e allineamento verticale: medio; farà in modo che ogni cosa all'interno appaia esattamente nel mezzo, senza hack esatti di pixel come margini negativi.

Answer 3

Se il div popup ha una dimensione fissa, allora è possibile utilizzare questo CSS:

position: fixed; 
left: 0; 
top: 0; 
right: 0; 
bottom: 0; 
margin: auto; /* this requires a fixed size */ 

Altrimenti bisogna giocherellare con display: table-cell; e simili.

Answer 4

È questo che stai cercando di fare? http://jsfiddle.net/Hrwf8/

Il tasto qui è di impostare gli stili sinistro e superiore al 50% e impostare il margine sinistro e superiore sull'ammontare negativo della metà della larghezza e dell'altezza del div. Questo ovviamente richiede che tu abbia una dimensione fissa per il tuo div.

Answer 5

nel CSS:

.ClassCenter { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
} 

Fonte: http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html