Centrare le cose verticalmente (e orizzontalmente)

Perché provare ad allineare qualcosa al centro del viewport (o del wrapper) sia verticalmente che orizzontalmente (o entrambi) così doloroso?

Ho provato tutto quello che ho potuto trovare nell’ultima ora, da siti come W3Schools a S / O a MSDN – semplicemente non so come farlo. Ci deve essere un modo semplice per farlo. E PERCHÉ puoi centrare un DIV in orizzontale come questo: margin: 0 auto; ma non verticalmente? E perché non puoi usare lo stesso approccio con qualsiasi altro elemento della pagina?

Ho una frase di una riga (testimonial) che vorrei centrare verticalmente e orizzontalmente, come posso fare questo?

Questo centrerà sia orizzontalmente che verticalmente e funziona in tutti i browser, inclusa la modalità di quirro di IE.

div{ width:200px; height:200px; background:red; position:absolute; left:50%; top:50%; margin-left:-100px; /* Negative half the width*/ margin-top:-100px; /* Negative half the height */ } 

Controlla l’esempio di lavoro su http://jsfiddle.net/Nt5PU/

Roger Johansson ha scritto un interessante articolo al riguardo qui: http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/

Ecco il succo:

  
Content goes here

Con questo css:

 html, body { width:100%; height:100%; } html { display:table; } body {display:table-cell; vertical-align:middle; } #body { max-width:50em; margin:0 auto; } 

Per centrare una riga di testo, imposta l’attributo line-height CSS alla stessa altezza del blocco che lo contiene.

Ehi è doloroso, sì lo è. È stupido che HTML non abbia di default queste cose e anche in HTML5 si debbano usare gli stessi hack. Ma prova queste soluzioni, rimpiangerai meno di reinventare tutto http://intensivstation.ch/en/templates/