CSS Utilizzando Flexbox


Esempio

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

html, body, .container {
  height: 100%;
}    
.container {
  display: flex;
  justify-content: center; /* horizontal center */
}
img {
  align-self: center; /* vertical center */
}

Visualizza risultato


HTML:

<img src="http://lorempixel.com/400/200" />

CSS:

html, body {
  height: 100%;
}   
body {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Visualizza risultato

Vedi Dynamic Vertical e Horizontal Centering nella documentazione di Flexbox per maggiori dettagli su flexbox e cosa significano gli stili.

Supporto del browser

Flexbox è supportato da tutti i principali browser, tranne le versioni di IE prima di 10 .

Alcune versioni recenti del browser, come Safari 8 e IE10, richiedono i prefissi del fornitore .

Per un modo rapido per generare prefissi c'è Autoprefixer , uno strumento di terze parti.

Per i browser più vecchi (come IE 8 e 9) è disponibile un Polyfill .

Per uno sguardo più dettagliato al supporto del browser Flexbox, vedere questa risposta .