Afbeelding horizontaal centreren binnen een div

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

Antwoord 1, autoriteit 100%

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

Hier is mijn oplossing in: http://jsfiddle.net/marvo/3k3CC/2/

Antwoord 2, autoriteit 13%

CSS flexboxkan het met justify-content: centerop het bovenliggende afbeeldingselement. Om de beeldverhouding van de afbeelding te behouden, voegt u align-self: flex-start;eraan toe.

HTML

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

CSS

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

Uitvoer:

Antwoord 3, autoriteit 8%

Ik vond zojuist deze oplossing hieronder op de W3 CSS-pagina en het beantwoordde mijn probleem.

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

Bron: http://www.w3.org/Style/ Voorbeelden/007/center.en.html

Antwoord 4, autoriteit 2%

Dit zou het ook doen

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

Antwoord 5, autoriteit 2%

Het beste dat ik heb gevonden (dat in alle browsers lijkt te werken) voor het horizontaal centreren van een afbeelding, of welk element dan ook, is om een CSS-klasse te maken en de volgende parameters op te nemen:

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 */
}

U kunt de CSS-klasse die u heeft gemaakt als volgt op uw tag toepassen:

HTML

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

Je kunt de CSS in je element(en) ook inline maken door het volgende te doen:

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

…maar ik zou niet aanraden om CSS inline te schrijven, omdat je dan meerdere wijzigingen in al je tags moet aanbrengen met je centrerende CSS-code als je ooit de stijl wilt veranderen.

Antwoord 6

Dit is wat ik uiteindelijk deed:

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

Dit beperkt de hoogte van de afbeelding tot 600px en wordt horizontaal gecentreerd (of verkleind als de bovenliggende breedte kleiner is) naar de bovenliggende container, waarbij de verhoudingen behouden blijven.

Antwoord 7

Ik ga erop uit en zeg dat het volgende is wat je zoekt.

Let op, het volgende is volgens mij per ongeluk weggelaten in de vraag (zie opmerking):

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

Dus wat je nodig hebt is:

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

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

Antwoord 8

Voeg dit toe aan uw CSS:

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

Gewoon verwijzen naar een onderliggend element, in dat geval de afbeelding.

Antwoord 9

Om een afbeelding horizontaal te centreren, werkt dit:

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

Antwoord 10

Plaats de afbeelding in een newDiv.
Maak de breedte van de bevattende divhetzelfde als de afbeelding.
Pas margin: 0 auto;toe op de newDiv.
Dat zou de divin de container moeten centreren.

Antwoord 11

Een afbeelding centreren in een 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="https://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="https://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="https://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

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

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

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

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;
}

  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;
    }

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

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

<div>
 <img>
</div>

object-fit : *depend on u*

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

<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 */

.document {
  align-items: center;
  background-color: hsl(229, 57%, 11%);
  border-radius: 5px;
  display: flex;
  height: 40px;
  width: 40px;
}
.document img {
  display: block;
  margin: auto;
}

<div class="document">
  <img src="./images/icon-document.svg" alt="icon-document" />
</div>

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

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

img#center-img{
 display: block;
 margin: auto;
}

<html>
  <body>
    <div>
      <img src='pic.png' id='center-img'>
    </div>
  </body>
</html>