Centralizar imagem horizontalmente em uma div

Provavelmente, essa é uma pergunta estúpida, mas como as formas usuais de alinhamento centralizado de uma imagem não estão funcionando, pensei em perguntar. Como posso alinhar centralmente (horizontalmente) uma imagem dentro de sua div de contêiner?

Aqui está o HTML e CSS. Também incluí o CSS para os outros elementos da miniatura. Ele é executado em ordem decrescente para que o elemento mais alto seja o contêiner de tudo e o mais baixo esteja dentro de tudo.

#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>

Ok, eu adicionei a marcação sem o PHP, por isso deve ser mais fácil de ver. Nenhuma das soluções parece funcionar na prática. O texto na parte superior e inferior não pode ser centralizado e a imagem deve ser centralizada na div de seu contêiner. O contêiner está oculto, então eu quero ver o centro da imagem, pois normalmente é onde está o foco.

The CSS Guy sugere o seguinte:

Então, traduzindo, talvez:

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

Aqui está a minha solução em: http://jsfiddle.net/marvo/3k3CC/2/

O CSS flexbox pode fazer isso com justify-content: centero elemento pai da imagem. Para preservar a proporção da imagem, adicione- align-self: flex-start;a.

HTML

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

CSS

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

Resultado:

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>

Acabei de encontrar esta solução abaixo na página CSS do W3 e ela respondeu ao meu problema.

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

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

Isso também faria

#imagewrapper {
    text-align:center
}

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

A melhor coisa que encontrei (que parece funcionar em todos os navegadores) para centralizar uma imagem ou qualquer elemento horizontalmente é criar uma classe CSS e incluir os seguintes 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 */
}

Você pode aplicar a classe CSS criada à sua tag da seguinte maneira:

HTML

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

Você também pode alinhar o CSS nos seus elementos, fazendo o seguinte:

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

... mas eu não recomendaria escrever CSS embutido, porque é necessário fazer várias alterações em todas as suas tags usando o código CSS centralizador, se você quiser mudar o estilo.

Isto é o que eu acabei fazendo:

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

O que limitará a altura da imagem a 600px e será centralizado horizontalmente (ou redimensionado se a largura pai for menor) para o contêiner pai, mantendo proporções.

Vou me expor e dizer que é o que você procura depois.

Observe que o seguinte, acredito, foi acidentalmente omitido na pergunta (consulte o comentário):

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

Então, o que você precisa é:

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

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

Para centralizar uma imagem horizontalmente, isso funciona:

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

Adicione isso ao seu CSS:

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

Apenas referenciando um elemento filho que, nesse caso, é a imagem.

Coloque um preenchimento de pixel igual para esquerda e direita:

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

Coloque a foto dentro de a newDiv. Faça a largura do que contenha divo mesmo que a imagem. Aplique margin: 0 auto;ao newDiv. Isso deve centralizar o divinterior do contêiner.

Use posicionamento. O seguinte funcionou para mim ... (Horizontalmente e Verticalmente Centralizado)

Com o zoom no centro da imagem (a imagem preenche a 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;
}

Sem zoom para o centro da imagem (a imagem não preenche a 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;
    }

você pode alinhar seu conteúdo usando a caixa flexível com o 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/

Centralizar uma imagem em uma 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>

Eu tentei de algumas maneiras. Mas dessa maneira funciona perfeitamente para mim

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

Uma maneira responsiva de centralizar uma imagem pode ser assim:

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

Se você tiver que fazer isso inline (como ao usar uma caixa de entrada),
aqui está um rápido hack que funcionou para mim: cercar seu (link de imagem neste caso)
em um divcomstyle="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;
}

sim, o código como este funciona bem

<div>
 <img>
</div>

mas só para lembrar, o estilo da imagem

object-fit : *depend on u*

para que o código final seja como exemplo

<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 a propriedade flex no contêiner é a resposta certa para poder centralizar verticalmente e horizontalmente.

A resposta principal aqui NÃO funciona para centralizar um item verticalmente, apenas 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>