Cómo centrar la imagen en un div horizontal y verticalmente

Solución:

Aquí hay un tutorial para saber cómo centrar las imágenes vertical y horizontalmente en un div.

Esto es lo que busca:

.wraptocenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 200px;
  height: 200px;
  background-color: #999;
}
.wraptocenter * {
  vertical-align: middle;
}

<div class="wraptocenter">
  <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>

Para la alineación vertical, incluiría algo de CSS para colocarlo desde el 50% superior y luego subirlo a la mitad del número de píxeles de altura de la imagen.

Horizontal, usaría un margen, como se sugiere.

Entonces, si su imagen fuera de 100x100px, terminaría con.

<img id="my_image" src="https://foroayuda.es/example.jpg">

<style>
#my_image{
 position: absolute;
 top: 50%;
 margin: -50px auto 0;
}
</style>

---

---

Utiliza Nuestro Buscador