Cannot center img horizontally - html

Question

I'm trying to center image horizontally in this sample http://jsfiddle.net/3k3CC/1545/ , but I'm unsuccessfull. It only works when container is wider than image, but what I need is for the image to be centered even if the container is thinner than the image itself.
Sample CSS:
#artiststhumbnail {
width:100px;
height:308px;
overflow:hidden;
border-color:#DADADA;
border-style:solid;
border-width:thin;
background-color:pink;
}
#artiststhumbnail:hover {left:50px }
#genre {
font-size:12px;
font-weight:bold;
color:#2A2A2A
}
#artiststhumbnail a img {
display : block;
margin : auto;
}
Sample HTML:
<div id="artiststhumbnail">
<a href="#">
<!--image here-->
<img src="http://goo.gl/QrKCc" height="100%" alt="artist" border="1" />
</a>
</div>

Answer 1

You should add text-align: center; to #thumbnailwrapper and set display: inline-block; to #artiststhumbnail.
DEMO
EDIT:
I'm sorry I don't unsderstand your question at the beggining. Use this simple CSS:
#artiststhumbnail a img {
position: relative;
left: 50%;
transform: translateX(-50%);
}
DEMO2

Answer 2

you can add to the #artiststhumbnail this code,
width: 100%;
padding: 15px;
http://codepen.io/jrey/pen/waXgBO updated code :)
try this CSS.. comment your css and try this please...
#artiststhumbnail {
width:100px;
height:308px;
overflow:hidden;
border-color:#DADADA;
border-style:solid;
border-width:thin;
background-color:pink;
width: 100%;
padding: 15px;
display: inline-flex;
flex-flow: row wrap;
justify-content: center;
}
#artiststhumbnail:hover {left:50px }
#genre {
font-size:12px;
font-weight:bold;
color:#2A2A2A
}
#artiststhumbnail a {
display: flex;
justify-content: center;
}
#artiststhumbnail a img {
display : block;
margin : 15px;
width: 200px;
height: auto;
}

Answer 3

DEMO
CSS
#thumbnailwrapper {
color:#2A2A2A;
margin-right:5px;
border-radius:0.2em;
margin-bottom:5px;
background-color:#E9F7FE;
padding:5px;
border-color:#DADADA;
border-style:solid;
border-width:thin;
font-size:15px;
/* The following rules make this a flexbox container */
display: flex;
display: -webkit-flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#thumbnailwrapper:hover {
box-shadow:0 0 5px 5px #DDDDDD
}
#artiststhumbnail {
width:100px;
height:308px;
overflow:visible; // Changed from hidden to visible
border-color:#DADADA;
border-style:solid;
border-width:thin;
background-color:pink;
}
#artiststhumbnail:hover {
/*left:50px*/
}
/* No position: fixed. absolute, or relative; left: 50px has no effect on a static element */
#genre {
font-size:12px;
font-weight:bold;
color:#2A2A2A
}
#artiststhumbnail a img {
/* display: block;
margin: auto; */
}
/* Removed margin and block display to demonstrate that flexbox container and it's children elements are not easily influenced by other element properties and attributes */
HTML
<div id="thumbnailwrapper">
<div id="artiststhumbnail"> <a href="#">
<!--image here-->
<img src="http://goo.gl/QrKCc" height="100%" alt="artist" border="1" />
</a>
</div>
</div>

Answer 4

you could try your image width to 100%
#artiststhumbnail a img {
display : block;
margin : auto;
width:100%;
}

Answer 5

Not sure exactly what you mean by center but here it goes. If you want the image itself to center, use background-size: cover and background-position: center to accomplish this.
<div id="thumbnailwrapper">
<div id="artiststhumbnail">
<a href="#">
<!--image here-->
<div></div>
</a>
</div>
</div>
#artiststhumbnail a div {
display : block;
margin : auto;
height: 100%;
width: 100px;
background-image: url('http://goo.gl/QrKCc');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
JSFiddle
EDIT: sorry, had the wrong jsfiddle link attached