Html 如何使图像保持在中间后，和X27；变换：缩放'；申请了什么？

这把小提琴说明了我的问题：

对于低于500px的视口，我需要对顶部的图像使用

transform:scale

。但是，由于某些原因，在应用缩放后，图像保持在右侧。我希望图像水平保持在中间。

我在底部的文本上测试了 Trime:Stase函数，并设法保持在中间。你知道我怎样才能做到这一点吗

在一些论坛上，我发现了一个

transformorigin

属性，当我添加

transformorigin:left

到图像容器，它将图像保留在左侧，但是当我添加

transform origin:center时它没有任何区别

请注意，我只需要在图像上使用
transform:scale
功能。基于视口大小使图像响应不适用于我的应用程序。非常感谢

HTML代码：

<div id="grey-bar">
    <div id="image-container">
        <img src="http://www.refugeeweek.org.uk/Resources/RefugeeWeek2012/Images/CounterpointsArts3.bmp">
    </div>
</div>

<h3 id="main-heading">How can I make the image above to stay in the middle after the 'transform: scale' is applied for viewports below 500px? For some reason it stays on the right.</h3>

<div id="grey-bar">
    <div id="bottom-heading-container">
        <h1 id="bottom-heading">This sentance stays in the middle after the 'transform: scale' is applied.</h1>
    </div>
</div>

在我的Firefox上，出现了您描述的问题。
我建议添加“中心”标记以解决此问题：

<center>   </center>



然后它显示在我的Firefox的中心，正如预期的那样

因为您希望img集中在容器中，所以它应该如下所示：

<div id="image-container">
  <center>
    <img/>
  </center>
</div>


它在垂直和水平方向上保持在中心位置，将徽标宽度设置为100%；不幸的是，在我的应用程序中，将徽标宽度设置为100%是不可能的。我只能使用缩放功能。它保持在中间，但你可以试试这个：@Christina非常感谢你的小提琴。但是，当宽度非常窄时，徽标仍然向右摆动。然而，底部的句子完全位于中间。我在图像容器周围添加了标签，但它不起作用。你能给你的小提琴添加一个链接吗？
不推荐使用。请参阅解释。我已经扩展了上面的答案，以解决您的困惑。如果你注意到这个评论，请看一看。不推荐使用的
标签的CSS等价物是
text align:center
<div id="image-container">
  <center>
    <img/>
  </center>
</div>