¿Cómo centrar la imagen horizontalmente dentro de un elemento div?

¿Cómo puedo centrar (horizontalmente) una imagen dentro de su div contenedor?

Aquí está el HTML y CSS. También incluí el CSS para los otros elementos de la miniatura. Se ejecuta en orden descendente, por lo que el elemento más alto es el contenedor de todo y el más bajo está dentro de todo.

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}

<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

Bien, agregué el marcado sin PHP, por lo que debería ser más fácil de ver. Ninguna solución parece funcionar en la práctica. El texto en la parte superior e inferior no se puede centrar y la imagen debe estar centrada dentro de su div contenedor. El contenedor tiene un desbordamiento oculto, por lo que quiero ver el centro de la imagen, ya que normalmente es donde está el foco.

Jun 12 '12 07:06 Jacob Windsor

CSS flexbox puede hacerlo justify-content: centeren el elemento principal de la imagen. Para preservar la relación de aspecto de la imagen, agréguela align-self: flex-start;.

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
  display: flex;
  justify-content: center;
}

Producción:

body {
  background: lightgray;
}
.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
  width: 500px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}
.image-3 {
  width: 300px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

Dec 10 '2015 13:12 m4n0

Encontré esta solución a continuación en la página CSS de W3 y respondió a mi problema.

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Fuente: http://www.w3.org/Style/Examples/007/center.en.html

Aug 29 '2014 13:08 mk.hd

Esto también lo haría

#imagewrapper {
    text-align:center;
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px;
}

Oct 06 '2014 11:10 Mehmet Yaden

Lo mejor que he encontrado (que parece funcionar en todos los navegadores) para centrar una imagen, o cualquier elemento, horizontalmente es crear una clase CSS e incluir los siguientes parámetros:

CSS

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

Luego puede aplicar la clase CSS que creó a su etiqueta de la siguiente manera:

HTML

<img class="center" src="image.jpg" />

También puedes insertar el CSS en tus elementos haciendo lo siguiente:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

...pero no recomendaría escribir CSS en línea porque entonces tendrás que realizar múltiples cambios en todas tus etiquetas usando tu código CSS de centrado si alguna vez quieres cambiar el estilo.

Jan 20 '2018 22:01 Kevin