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

Durante lo sviluppo di siti Web, ho visto che centrare verticalmente un container (di altezza fissa) all’interno di un container di altezza casuale rappresenta sempre un incubo per lo sviluppatore web (almeno io) mentre quando si tratta di centrare orizzontalmente un container (di larghezza) 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 funziona con il margin:auto 0px; quando si tratta di centrare un container di altezza fissa all’interno di un container di altezza casuale? C’è qualche ragione specifica per farlo? Grazie per le tue informazioni in anticipo.

È davvero meno di un incubo di quello che pensi, ma non usare i margini. vertical-align è davvero quello su cui dovresti fare affidamento per il centraggio verticale dell’altezza del fluido. Ho buttato insieme una rapida demo per dimostrare il mio punto:

HTML:

 

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/

La risposta giusta per la tua domanda è quel margin: auto 0 non funziona allo stesso modo del margin: 0 auto funziona perché width: auto non funziona allo stesso modo height: auto fa.

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

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 ————————-

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

nota ———– questa class CSS funziona con quasi tutti i browser