Centrar la imagen horizontalmente dentro de un div

Esta es probablemente una pregunta estúpida, pero dado que las formas habituales de alineación central de una imagen no funcionan, pensé en preguntar. ¿Cómo puedo centrar, alinear (horizontalmente) una imagen dentro de su contenedor div?

Aquí está el HTML y CSS. También he incluido 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>

De acuerdo, he agregado el marcado sin el PHP, por lo que debería ser más fácil de ver. Ninguna de las soluciones parece funcionar en la práctica. El texto en la parte superior e inferior no puede estar centrado y la imagen debe estar centrada dentro de su contenedor div. El contenedor tiene un desbordamiento oculto, así que quiero ver el centro de la imagen, ya que normalmente es donde está el foco.

CSS Guy sugiere lo siguiente:

Entonces, traduciendo, tal vez:

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Aquí está mi solución en: http://jsfiddle.net/marvo/3k3CC/2/

CSS flexbox puede hacerlo con justify-content: centerel elemento primario 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;
}

Salida:

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>

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

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

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

Esto también lo haría

#imagewrapper {
    text-align:center
}

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

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 puede alinear el CSS en sus 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 tienes que hacer múltiples cambios en todas tus etiquetas usando tu código CSS de centrado si alguna vez quieres cambiar el estilo.

Esto es lo que terminé haciendo:

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

Lo que limitará la altura de la imagen a 600 px y centrará horizontalmente (o reducirá el tamaño si el ancho principal es más pequeño) al contenedor principal, manteniendo las proporciones.

Voy a arriesgarme y decir que lo siguiente es lo que buscas.

Tenga en cuenta que lo siguiente, creo, se omitió accidentalmente en la pregunta (ver comentario):

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

Entonces, lo que necesitas es:

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

Para centrar una imagen horizontalmente, esto funciona:

<p style="text-align:center"><img src=""></p>

Agregue esto a su CSS:

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

Simplemente haciendo referencia a un elemento hijo que en ese caso es la imagen.

Ponga un relleno de píxel igual para izquierda y derecha:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">

Pon la foto dentro de a newDiv. Haga que el ancho del contenedor sea divigual que la imagen. Aplicar margin: 0 auto;a la newDiv. Eso debería centrar el divdentro del contenedor.

Usar posicionamiento. Lo siguiente funcionó para mí ... (Centrado horizontal y verticalmente)

Con zoom al centro de la imagen (la imagen llena el div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Sin acercar al centro de la imagen (la imagen no llena el div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

puedes alinear tu contenido usando flex box con un código mínimo

HTML

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

CSS

.image-container{
  width:100%;
  background:green;
  display:flex;

.image-container{
  width:100%;
  background:green;
  display:flex;
  justify-content: center;
  align-items:center;
}

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

js fiddle link https://jsfiddle.net/7un6ku2m/

Centrar una imagen en un div

/* standar */
div, .flexbox-div {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 10px;
  background-color: grey;  
}

img {
  border: 3px solid red;
  width: 75px;
  height: 75px;
}
/* || standar */


/* transform */
.transform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
}
/* || transform */


/* flexbox margin */
.flexbox-div {
  display: -webkit-flex;
  display: flex;
  background-color: lightgrey; 
}

.margin-img {
  margin: auto;
}
/* || flexbox margin */


/* flexbox justify align */
.flexbox-justify {
  justify-content: center;
}

.align-item {
  align-self: center;
}
/* || flexbox justify align */

<h4>Using transform </h4>  
<div>
  <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox margin</h4>  
<div class="flexbox-div">
  <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox justify align</h4>  
<div class="flexbox-div flexbox-justify">
  <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

Lo he intentado de varias maneras. Pero de esta manera funciona perfectamente para mí

<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />

Una forma receptiva de centrar una imagen puede ser así:

.center {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

Si tiene que hacer esto en línea (como cuando usa un cuadro de entrada),
aquí hay un truco rápido que funcionó para mí: rodee su (enlace de imagen en este caso)
en un divconstyle="text-align:center"

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */

##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

sí, el código como este funciona bien

<div>
 <img>
</div>

pero solo para recordarte, el estilo de la imagen

object-fit : *depend on u*

entonces el código final será como Ejemplo

<div style="border: 1px solid red;">
    <img
      src="./assets/images/truck-toy.jpg"
      alt=""
      srcset=""
      style="
       border-radius: 50%;
       height: 7.5rem;
       width: 7.5rem;
       object-fit: contain;"
    />
</div>

Usar la propiedad flex en el contenedor es la respuesta correcta para poder centrar tanto vertical como horizontalmente.

La respuesta principal aquí NO funciona para centrar un elemento verticalmente, solo horizontalmente.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


      <style>
      body{
  /*-------------------important for fluid images---\/--*/
  overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
  overflow-y: scroll;
  margin-left:0px;
  margin-top:0px;
  /*-------------------important for fluid images---/\--*/
      }
      .thirddiv{
      float:left;
      width:100vw;
      height:100vh;
      margin:0px;
      background:olive;
      }
      .thirdclassclassone{
      float:left;   /*important*/
      background:grey;
      width:80vw;
      height:80vh; /*match with img height bellow*/
      margin-left:10vw; /* 100vw minus "width"/2    */
      margin-right:10vw; /* 100vw minus "width"/2   */
      margin-top:10vh;
      }
      .thirdclassclassone img{
      position:relative; /*important*/
     display: block;  /*important*/
    margin-left: auto;  /*very important*/
    margin-right: auto;  /*very important*/
    height:80vh; /*match with parent div above*/

    /*--------------------------------
    margin-top:5vh;
    margin-bottom:5vh;
    ---------------------------------*/
    /*---------------------set margins to match total  height of parent di----------------------------------------*/
      }
    </style>           
</head>  
<body>
    <div class="thirddiv">
       <div class="thirdclassclassone">
       <img src="ireland.png">
    </div>      
</body>
</html>