Um elemento `<img>` é um elemento em linha (valor de exibição do `inline-block` ). Ele pode ser facilmente centralizado adicionando a propriedade CSS `text-align: center;` ao elemento pai que o contém.
Para centralizar uma imagem usando `text-align: center;` você deve colocar o `<img>` dentro de um elemento de nível de bloco, como um `div` . Como a propriedade `text-align` só se aplica a elementos de nível de bloco, você coloca `text-align: center;` no elemento de nível de bloco de acondicionamento para alcançar um `<img>` horizontalmente centrado.
**Nota:** O elemento pai deve ser um elemento bloco. Se não for um elemento bloco, você deve adicionar a propriedade CSS `display: block;` junto com a propriedade `text-align` .
