Perché l'attributo automatico per margine non funziona in verticale mentre funziona in orizzontale?

Question

Ho visto che durante lo sviluppo di siti Web, centrare verticalmente un container (di altezza fissa) all'interno di un contenitore di altezza casuale rappresenta sempre un incubo per lo sviluppatore web (almeno io) mentre quando si tratta di centrare orizzontalmente un container (di larghezza fissa) all'interno di un contenitore di larghezza casuale, il margin:0px auto; tende a servire una facile via d'uscita nel modello standard.

Quando le cose possono essere così semplici perché il CSS non risolve il problema con lo margin:auto 0px; quando si tratta di centrare un contenitore di altezza fissa all'interno di un contenitore di altezza casuale? C'è qualche ragione specifica per farlo? Grazie per le tue informazioni in anticipo.

Answer 1

È davvero meno di un incubo di quanto si pensi, basta non usare i margini. vertical-align è davvero quello su cui devi fare affidamento per il centraggio verticale dell'altezza del fluido. Ho gettato insieme un demo veloce per dimostrare il mio punto:

HTML:

<span></span><div id="any-height"></div> 

CSS:

* { margin: 0; padding: 0; } 
html, body { 
    height: 100%; 
    text-align: center; } 
span { 
    height: 100%; 
    vertical-align: middle; 
    display: inline-block; } 
#any-height { 
    background: #000; 
    text-align: left; 
    width: 200px; 
    height: 200px; 
    vertical-align: middle; 
    display: inline-block; } 

Vedi: http://jsfiddle.net/Wexcode/jLXMS/

Answer 2

La risposta giusta per la tua domanda è che margin: auto 0 doesn funziona allo stesso modo di margin: 0 auto perché width: auto non funziona nello stesso modo height: auto do es.

Il margine automatico verticale funziona per elementi posizionati in modo assoluto con un'altezza nota.

.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    width: 150px; 
    height: 150px; 
    margin: auto; 
} 

Answer 3

css ----------------

.aligncenter{ 
     display: -webkit-box; 
     display: -moz-box; 
     display: box; 
     -webkit-box-align: center; 
     -moz-box-align: center; 
     flex-align: center; 
     -webkit-box-pack: center; 
     -moz-box-pack: center; 
     flex-pack: center; 
} 

html ------------------ -------

<div class="aligncenter">

---your content appear at the middle of the parent div----

</div>

note ----------- questa classe CSS funziona con quasi tutti i browser