Artigo original: How to Center an Image Using Text Align: Center

O <img> é um elemento inline (em linha, com o valor de display igual a inline-block). Ele pode ser centralizado facilmente adicionando a propriedade de CSS text-align: center; ao elemento pai que o contém.

Para centralizar uma imagem usando text-align: center; você deve colocar a <img> dentro de um elemento de nível de bloco, como uma div. Já que a propriedade text-align se aplica apenas a elementos de nível de bloco, você coloca text-align: center; no elemento de nível de bloco que circunda a imagem e consegue centralizar a <img> na horizontal.

Exemplo

<!DOCTYPE html>
<html>
  <head>
    <title>Centralizando uma imagem usando text align center</title>
    <style>
      .img-container {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="img-container"> <!-- Elemento pai em nível de bloco -->
      <img src="user.png" alt="Uma pessoa">
    </div>
  </body>
</html>

Observação: o elemento pai deve ser um elemento em nível de bloco. Do contrário, é preciso adicionar a propriedade de CSS display: block; a ele juntamente à propriedade text-align.

<!DOCTYPE html>
<html>
  <head>
    <title>Centralizando uma imagem usando text align center</title>
    <style>
      .img-container {
        text-align: center;
        display: block;
      }
    </style>
  </head>
  <body>
    <span class="img-container"> <!-- Elemento pai em linha (inline) -->
      <img src="user.png" alt="">
    </span>
  </body>
</html>

Demonstração: Codepen

Object fit

Quando sua imagem estiver centralizada, é possível que você queira redimensioná-la. A propriedade object-fit especifica como um elemento responde à largura/altura de seu elemento pai.

Essa propriedade pode ser usada para imagens, vídeos ou qualquer outra mídia. Ela também pode ser usada com a propriedade object-position para obter mais controle sobre a forma como a mídia é exibida.

Basicamente, usamos a propriedade object-fit para definir como esticar ou encolher uma mídia em linha.

Sintaxe

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

Valores

  • fill: Este é o valor padrão. Redimensiona o conteúdo de maneira a equivaler ao elemento pai, independentemente da proporção da tela.
  • contain: Redimensiona o conteúdo para que preencha o elemento pai usando a proporção de tela correta.
  • cover: Semelhante a contain, mas cortando o conteúdo.
  • none: Exibe a imagem em tamanho original.
  • scale-down: Compara a diferença entre none e contain para obter o menor tamanho de objeto concreto.

Compatibilidade com navegadores

A propriedade object-fit tem suporte na maioria dos navegadores modernos. Para saber as informações mais atualizadas sobre compatibilidade, confira o site http://caniuse.com/#search=object-fit (em inglês).

Documentação