Il modo migliore per centrare il div dinamico nel mezzo della pagina

So che questo genere di cose è stato chiesto molto, ma voglio essere in grado di centrare un div nel mezzo della pagina e farlo stare sempre nel mezzo della pagina, non importa quanto sia largo o alto.

Immagino che sarebbe meglio usare un po ‘di javascript per capire quanto sarà largo l’elemento e quindi metà dell’importo da togliere al margine.

Per chiarire le cose, questo genere di cose:

.myDivHere { position: absolute; left: 50%; top: 50%; text-align: center; width: 20%; height: 20%; margin-left: -273px; /*half width set by js script*/ margin-top: -132px; /*half height set by js script*/ } 

Ho impostato la larghezza e l’altezza al 20% in quanto voglio che questo div sia in grado di mantenere le sue dimensioni rispetto alla finestra del browser (per il supporto mobile e così via). Qualche idea?

A meno che mi manchi qualcosa, puoi rinunciare al JavaScript e usare il semplice CSS:

 div { position:absolute; background:red; width:20%; height:20%; top:0; bottom:0; left:0; right:0; margin:auto; } 

esempio jsFiddle

Ecco, vai.

Dovrebbe essere notato che questa risposta è più sui concetti che dare la risposta a titolo definitivo.

Ora, vedi la sezione “div # b” del CSS? Per mantenere tutto al centro, scrivi semplicemente uno script che mantiene il valore margin-top del 50% dell’altezza. E questo è tutto!

Esempio: (attualmente) height = 60, margin-top = -30px (modificato per height = 100) height = 100, margin-top = -50px

 div#a { width: 300px; height: 300px; border-width:1px; border-style: solid; /* important stuff below */ display: inline-block; } div#b { width: 60px; height: 60px; background-color: red; /* important stuff below */ position: relative; margin: -30px auto 0 auto; top: 50%; } 

Ecco una codepen:

Controlla.

La maggior parte dei tuoi stili non sono necessari, e javascript non è assolutamente necessario. La chiave per il centramento verticale è display: table . Richiede un po ‘di nidificazione, quindi ho modificato anche la tua struttura.

In jQuery puoi usare i .width() e .height() quando restituiscono la larghezza calcasting in pixel, non in percentuale + dovrai ascoltare l’evento di resize finestra. Ad esempio in questo modo:

 $(function() { function updateDivPosition() { var myWidth = $( '.myDivHere' ).width() , myHeight = $( '.myDivHere' ).height(); $( '.myDivHere' ).css( { marginLeft: -( parseInt( myWidth, 10 ) / 2 ) + 'px', marginTop: -( parseInt( myHeight, 10 ) / 2 ) + 'px' }); } updateDivPosition(); // first time set correct position on onload $( window ).resize( updateDivPosition ); // update on window resize }); 

demo di jsFiddle