2009-08-29 24 views
12

In realtà al centro della vista corrente, sopra tutti gli altri oggetti. Cross-browser e senza 3rd plugin di partito ed eccCome posizionare div al centro dello schermo?

Via CSS o Javascript

UPDATE:

Ho cercato di usare di Javascript Sys.UI.DomElement.setLocation(), ma questo posizionamento degli oggetti non in posizione assoluta ma relativa al suo genitore.
Esiste una funzione da inserire in posizione assoluta?

+0

Per la posizione relativa alla finestra del browser, utilizzare "fixed". – ndp

risposta

22

Per avere il centro nel browser, indipendentemente dallo scorrimento della pagina (che è probabilmente quello che si desidera), posizione: fissa sarà più affidabile. Amending codice mike108:

<style type="text/css"> 
.centered { 
    position:fixed; 
    z-index: 100; 
    top:50%; 
    left:50%; 
    margin:-100px 0 0 -100px; 
    width:200px; 
    height:200px; 
} 
</style> 

Si presume che si abbia una casella di dimensioni fisse che si sta mostrando. Se non si dispone di una casella di dimensioni fisse, sarà necessario utilizzare Javascript per misurare la finestra e il div e posizionarlo in modo esplicito (anche in questo caso, è probabilmente la soluzione da seguire).

Fare test su tutti i browser, però. Potrebbe esserci qualcosa a cui non stiamo pensando.

In realtà mi raccomando di guardare uno dei plugin Javascript che lo fa, almeno per un punto di partenza. L'hanno capito, anche se non vuoi usare il loro codice. Penso di aver usato jqModal come punto di partenza.

+2

Ma IE6 non è in grado di riconoscere la posizione: fissa. – Mike108

+0

Capisco che il tuo commento è vecchio ma per il riferimento di altre persone poiché questa è una domanda popolare, IE6 non dovrebbe essere supportato; incoraggia le persone a usarlo, supportarlo e svilupparlo. – cossacksman

+0

Vorrei aggiungere che, sebbene questa tecnica sia valida, se si stanno prendendo di mira solo i browser recenti, guarda su flexbox. Questo viene fatto con solo tre linee e non richiede di conoscere la larghezza o l'altezza dell'elemento centrato. – ndp

2

Deve avere una larghezza assegnata (cioè larghezza: 500px;) e quindi margine: auto; dovrebbe farlo

+0

Non in Internet Explorer :( – Thinker

8
<style type="text/css"> 
.Div1 { 
position:absolute; 
top:50%; 
left:50%; 
margin:-100px 0 0 -100px; 
width:200px; 
height:200px; 
border:1px solid #9999FF; 
} 
</style> 


<div class="Div1"> 
</div> 
+0

Impostare z-index per posizionare il div sopra tutti gli altri oggetti – Mike108

+0

È il centro orizzontale e il centro verticale – Mike108

+0

Devo impostare i margini in base alla larghezza e all'altezza? – dani

0

Se volete qualcosa di verticale e orizzontale centrato, provate questo ...

#shell{ 
width:100%; 
height:100% 
position:absolute; 
z-index:100; 
background: rgba(255,255,255,.8); 
display:table; 
} 

#inner{ 
margin:0 auto; 
display:table-cell; 
vertically-align:middle; 
width: /* input width here */ 
} 


    #overlay_container{ 
    width: /* input width here again */ 
    height: /* input height here */ 
    additional-styles: /* self explanatory */ 
    } 
1

sto usando questo blocco di codice js;

// funzione di chiamata sia in altezza che larghezza centro

setToCenterOfParent($('#myDiv'), document.body, false, false); 

// funzione di chiamata sia centro altezza solo

setToCenterOfParent($('#myDiv'), document.body, false, true); 

// funzione di chiamata sia centro larghezza solo

setToCenterOfParent($('#myDiv'), document.body, true, false); 

// definizione funzione

function setToCenterOfParent(element, parent, ignoreWidth, ignoreHeight){ 
     parentWidth = $(parent).width(); 
     parentHeight = $(parent).height(); 
     elementWidth = $(element).width(); 
     elementHeight = $(element).height(); 
     if(!ignoreWidth) 
      $(element).css('left', parentWidth/2 - elementWidth/2); 
     if(!ignoreHeight) 
      $(element).css('top', parentHeight/2 - elementHeight/2); 
    } 
+1

Si prega di chiarire in futuro che questo è JQuery, non JS. Il poster originale non diceva requisiti di terze parti. –

0

Si prega di controllare questa soluzione. Non è necessario definire una larghezza o un'altezza della casella di divisione. Sarà sempre nel centro/centro dello schermo. Spero che la mia soluzione sia utile per tutti.

<style type="text/css"> 

    .mask{ 
    position:fixed; 
    z-index:100; 
    width:100%; 
    height:100%; 
    text-align: center; 
    color: white; 
    background-color: rgba(0,0,0,0.75); 
    overflow:hidden; 
    } 

    .contener{ 
    height:100%; 
    display:inline-table; 
    } 

    .contener .content{ 
    vertical-align: middle; 
    display:table-cell; 
    } 

    .contener .content p{ 
    padding:2em;  
    border:1px solid #3d3d3d; 
    background-color: #1d1d1d; 
    border-radius: 10px; 
    -moz-box-shadow: 0px 10px 10px black; 
    -webkit-box-shadow: 0px 10px 10px black; 
    box-shadow: 0px 10px 10px black; 
    } 

</style> 

<div class="mask"> 
    <div class="contener"> 
    <div class="content"> 
     <p>Test string</p> 
    </div> 
    </div> 
</div> 
Problemi correlati