центр img внутри div

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

по вертикали: среднее;
выравнивание текста: по центру;
display: block

Возможно, что другие контейнеры extjs, содержащие эти переменные, изменяются.

Answer 1

Почему вы не используете тег 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>

Answer 2

Вы пробовали margin: auto;?Также вы можете использовать flex для внешнего компонента:

display: flex;
justify-content: center;

Кроме того, если ваш внешний компонент имеет фиксированный размер и position: relative, то вы можете использовать

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