javascript - 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>

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

vertical-align: middle;
text-align: center;
display: block

包含这些内容的其他 extjs 容器可能正在改变一些事情。

Answer 1

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

display: flex;
justify-content: center;

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

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