CSS Usando flexbox


Ejemplo

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 */
}

Ver resultado


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 */
}

Ver resultado

Consulte Centrado vertical y horizontal dinámico en la documentación de Flexbox para obtener más detalles sobre flexbox y lo que significan los estilos.

Soporte del navegador

Flexbox es compatible con todos los navegadores principales, excepto las versiones de IE anteriores a 10 .

Algunas versiones recientes del navegador, como Safari 8 y IE10, requieren prefijos de proveedores .

Para una forma rápida de generar prefijos, existe Autoprefixer , una herramienta de terceros.

Para navegadores más antiguos (como IE 8 y 9), está disponible un Polyfill .

Para una visión más detallada de la compatibilidad con el navegador flexbox, vea esta respuesta .