Artículo original: How to Center an Image Using Text Align: Center

Un elemento <img> es un elemento en línea (el valor display de inline-block). Puede ser fácilmente centrado añadiendo el text-align: center; propiedad CSS al elemento padre que lo contiene.

Para centrar una imagen usando text-align: center; debes colocar el <img> dentro del elemento de nivel de bloque como es un div. Ya que la propiedad text-align solo aplica a los elementos nivel de bloque, coloque text-align: center; encerrar dentro del elemento nivel de bloque para lograr un<img> un centrado horizontal.

Ejemplo

<!DOCTYPE html>
<html>
  <head>
    <title>Center an Image using text align center</title>
    <style>
      .img-container {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="img-container"> <!-- Block parent element -->
      <img src="user.png" alt="John Doe">
    </div>
  </body>
</html>

Nota: El elemento padre debe ser un elemento de bloque. Si no es un elemento de bloque, deberías añadir display: block; propiedad de CSS junto con la propiedad text-align.

<!DOCTYPE html>
<html>
  <head>
    <title>Center an Image using text align center</title>
    <style>
      .img-container {
        text-align: center;
        display: block;
      }
    </style>
  </head>
  <body>
    <span class="img-container"> <!-- Inline parent element -->
      <img src="user.png" alt="">
    </span>
  </body>
</html>

Demo: Codepen

Ajuste de objeto

Una vez que la imagen es centrada, es posible que desee cambiar el tamaño. La propiedad object-fit específica como un elemento responde al ancho/altura del box padre.

Esta propiedad puede ser usada para imagen, video, o cualquier otro medio. También puede ser usado con la propiedad  object-position para obtener más control en como el medio es mostrado.

Básicamente, usamos la propiedad  object-fit para definir como alargar o encoger un medio inline.

Sintaxis

.element {
    object-fit: fill || contain || cover || none || scale-down;
}

Valores

  • fill: Este es el valor predeterminado. Cambie el tamaño del contenido para que coincida con su box padre, independientemente de la relación de aspecto.
  • contain: Cambie el tamaño del contenido para llenar el box padre usando el apropiado aspect-radio.
  • cover: Similar a contain pero a menudo recortando el contenido.
  • none: Muestra la imagen a su tamaño original.
  • scale-down: Compara la diferencia entre none y contain para encontrar  el tamaño de objeto concreto más pequeño.

Compatibilidad del buscador

El object-fit es soportado por la mayoría de los buscadores modernos, para información más actualizada acerca de compatibilidad puedes ver esto en http://caniuse.com/#search=object-fit.