为左右两边设置相同的像素填充:

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

我发现的最好的事情(似乎在所有浏览器中都有效)是创建一个CSS类，并包括以下参数:

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

然后你可以将你创建的CSS类应用到你的标签，如下所示:

HTML

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

你也可以通过以下方法将CSS内联到你的元素中:

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

.．.但我不建议写CSS内联，因为如果你想要改变样式，你必须使用你的居中CSS代码对所有标签进行多次更改。

要使图像水平居中，这是有效的:

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

如果您必须内联执行此操作(例如使用输入框时)， 这里有一个对我有用的小技巧:把你的周围围起来(这里是图片链接) 在style="text-align:center"的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 */

这就是我最后做的:

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

这将限制图像高度为600px，并将水平居中(如果父宽度较小，则向下调整大小)到父容器，保持比例。

我要大胆地说，以下是你想要的。

注意，我认为问题中不小心遗漏了以下内容(见评论):

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

所以你需要的是:

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

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