如何使图像在转换后保持在中间位置：缩放＆＃39;被申请;被应用？

Question

这个小提琴演示了我的问题：http://jsfiddle.net/pn04dsvq/

对于500px以下的视口，我需要使用transform: scale顶部的图像。但是由于某些原因，在应用缩放后，图像保持在右侧。我希望图像水平放在中间。

我已经测试了底部文本的transform: scale功能，并设法保持在中间位置。你知道如何在顶部的图像中实现这一目标吗？

在某些论坛上，我发现了transform-origin属性，当我将transform-origin: 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>

CSS：

div#grey-bar {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-top:30px;
    padding-bottom:30px;
    background-color:grey;
}
div#image-container {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}
@media screen and (max-width:500px) {
    div#image-container {
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
        text-align: center;
        transform: scale(0.5);
    }
}
h3#main-heading {
    max-width:728px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    color:grey;
}
div#bottom-heading-container {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}
@media screen and (max-width:500px) {
    div#bottom-heading-container {
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
        text-align: center;
        transform: scale(0.5);
    }
}
h1#bottom-heading {
    max-width:728px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    color:white;
}

Answer 1

在我的Firefox上，您所描述的问题发生了。 我建议添加＆＃39; center＆＃39;标签来解决它：

<center>   </center>

然后它按预期显示在我的Firefox中心。

由于您希望img以容器为中心，因此它应如下所示：

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

为了使它兼容较新的html5和较旧的html解析器，你最好保持两个＆＃34; center＆＃34;标签和＆＃34; text-align＆＃34; ATTR。 上面的代码显示如下：