Para conseguir que una imagen quede centrada en nuestra página web necesitaremos hacer uso de dos propiedades. La primera será definir display con el valor block ya que de esta forma conseguiremos que la imagen sea independiente del resto de elementos y podamos definir sus atributos sin que otros interfieran.
Después, bastará con establecer los márgenes derecho e izquierdo con valor auto de tal forma que el navegador centre la imagen y divida el espacio restante equitativamente entre derecha e izquierda.
La forma más cómoda de aplicar estos cambios será crear la clase img-centrada y usarla en aquellas imágenes que queramos centrar en nuestra página web.
.img-centrada {
display: block;
margin-left: auto;
margin-right: auto;
}
Para usarla bastará con incluirla dentro la clase del elemento img de la siguiente manera.
<img src="../imagen.jpg" class="img-centrada"/>