你可以使用javascript来获得图片的大小，然后设置所需的css left值。
请注意图像的加载方式，因为它们是异步的，所以在文档准备就绪时不一定可用。这意味着除非正确处理图像，否则最终的宽度和高度尺寸将为0。

您应该将图像 Package 在另一个块元素中，并在图像的左侧放置一个负的位置。
大概是这样的

<div id="something">
  <div class="imagewrap">
    <img>
  </div>
</div>

然后给#something一个相对位置，给. imagewrap一个绝对位置，等等...... img应该和left:-50%有一个相对位置。

你试过吗

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

给予吧。

不需要使用Javascript，这可以在CSS中完成。
所需的HTML：（显然你必须把div改成img）

<div id="container">
  <div id="imgwrapper">
    <div id="img">Change this div-tag to an img-tag</div>
  </div>
</div>

所需CSS：

#container
{
  position: absolute;
  left: 200px;
  top: 100px;
  height: auto;
  overflow: visible;
  border: 2px dashed green;
}
#imgwrapper
{
  position: relative;
  margin-left: -50%;
  margin-top: -50%;
  padding-top: 25%;
  border: 2px dashed blue;
}
#img
{
  display: block;
  width: 200px;
  height: 100px;
  border: 2px solid red;
}

Click here for a jsFiddle link
margin-left: 50%;显然可以在使用容器div时工作，因为容器的宽度将与内容的宽度完全相同。（您可能需要添加width: auto;）但是margin-top: -50%;将不起作用，因为容器div的高度将随之改变，因此，您还需要另一个 Package 器div，在其中使用这个margin-top: -50%;，然后您需要通过使用基于正百分比的填充来修复这个错误。显然，可能有其他解决方案来解决这个问题，但解决方案应该是这样的。

也许最简单的解决方案之一是将图像放置在左上角的位置left: 0px; top: 0px;，然后使用translate将其中心移动到这个位置，下面是一个工作代码片段：

#theDiv {
  position: absolute;
  left: 100px;
  top: 100px;
  background: yellow;
  width: 200px;
  height: 200px;
}
#theImage {
  background: green;
  position: absolute;
  left: 0px;
  top: 0px;
  transform: translate(-50%, -50%);
}

<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>