在 div 中居中 img

Question

我在 sencha extjs 应用程序中有一个容器，里面有一个 img div，位于容器的左侧。我希望它居中，这样旋转就可以了（因为我已经将图像拟合到最长的尺寸）。

<div class="x-component ih-image-container x-box-item x-component-default"
    style="width: 516px; overflow: auto !important; right: auto; left: 0px; margin: 0px; top: 30px; height: 429px;" 
    id="component-1990">

    <img class="ih-image" 
        style="max-width: 100%; max-height: 100%; border-left: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.25s ease-in-out 0s; transform: rotate(0deg) scale(1); width: auto;" 
        src="/viewer/image/urlabridged" data-rotate="0" data-scale="1">
</div>

我已经尝试添加这些都没有效果，来自类似问题的 SO

垂直对齐：中间；
文本对齐：居中；
显示：块

可能包含这些的其他 extjs 容器正在发生变化。

Answer 1

你试过margin: auto;吗？ 您也可以将 flex 用于外部组件：

display: flex;
justify-content: center;

另外，如果你的外部组件有固定大小和position: relative，那么你可以使用

position: absolute;
left: 50%;
transform: translateX(-50%);

Answer 2

为什么不用 HTML <center> 标签？

.rotate90 {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

<div style="width: 516px; overflow: auto !important; right: auto; left: 0px; margin: 0px; top: 30px; height: 429px; background-color:red;">
<center><img src="https://www.gravatar.com/avatar/ad942ab5a7f58014ab966ae26cb91f87?s=48&d=identicon&r=PG&f=1" class="rotate90"/></center>
</div>