Как выровнять изображение по центру блока?

Question

[denism300]

Есть структура:

<div class="slider-item">
  <div class="slider-item__img">
    <picture>
      <img srcset="https://pbs.twimg.com/media/DQ_Bq-wUQAAHFK_.jpg">
      </picture>
  </div>
</div>

.slider-item {
  width: 900px;
  height: 413px;
  position: relative;
}
.slider-item__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  overflow: hidden;
}
.slider-item__img picture {
  display: block;
  height: 100%;
  width: max-content;
}
.slider-item__img picture img {
  width: auto;
  height: 100%;
}

пример на codepen
как выровнять изображение по центру блока?

Answer 1

[Александр]

.slider-item {
  width: 900px;
  height: 413px;
  margin: auto;
}

.slider-item__img {
  height: 100%;
}

.slider-item__img picture,
.slider-item__img img {
  display: block;
  width: 100%;
  height: 100%;
}

.slider-item__img img {
  object-fit: cover;
  object-position: 50% 50%;
}