Выровнять элемент изображения по центру родительского элемента div, выровняв изображение по левому краю

Question

Я хочу создать отзывчивый образ героя, но я не могу отцентрировать свой элемент изображения в родительском элементе div.Я уже проверил эти сообщения:

Центрирование изображения в div по горизонтали
Центрирование изображения по центру в div по горизонтали
Центрирование элемента изображения в родительском div

Как и предлагалось в этих других постах, я попытался поиграть с margin: auto auto;, с position, установив min-width в родительский div, но изображение остается выровненным по левому краю. Вот пример того, чего я пытаюсь достичь

А вот мой код (я также создал jsfiddle: https://jsfiddle.net/wuy44t9p/1/):

<style type="text/css">
    .profile-banner {
        display: block;
        height: 500px;
        position: relative;
    }

    .profile-banner picture {
        display: block;
        margin: 0 auto;
        position: absolute;
    }   

</style>


<div id="CPHBigBanner_pnlCoverPhoto">   
    <section class="profile-banner lazy">
        <picture class="profile-herobanner lazy" data-was-processed="true">
            <source type="image/webp" class="lazy" data-srcset="http://www.1001locaties.nl/images/tmp/41747_965_Owl.webp" srcset="/images/objphotos/covers/41747_965_Owl.webp" data-was-processed="true">
            <img class="lazy loaded" data-src="http://www.1001locaties.nl/images/tmp/41747_965_Owl.png" alt="" src="/images/objphotos/covers/41747_965_Owl.png" data-was-processed="true">
        </picture>    
    </section>
</div>

Answer 1

Согласно моим комментариям, вам нужно удалить абсолютное позиционирование с изображения, а также добавить центр выравнивания текста в контейнер:

.profile-banner {
  display: block;
  height: 500px;
  text-align:center;
}

.profile-banner picture {
  display: block;
  margin: 0 auto;
}

<div id="CPHBigBanner_pnlCoverPhoto">
  <section class="profile-banner lazy">
    <picture class="profile-herobanner lazy" data-was-processed="true">
      <source type="image/webp" class="lazy" data-srcset="http://www.1001locaties.nl/images/tmp/41747_965_Owl.webp" srcset="https://via.placeholder.com/350x150" data-was-processed="true">
      <img class="lazy loaded" data-src="http://www.1001locaties.nl/images/tmp/41747_965_Owl.png" alt="" srcset="https://via.placeholder.com/350x150" data-was-processed="true">
    </picture>
  </section>
</div>