Есть универсальный способ поместить картинку любого размера в центр блока?

Question

[GreenMan1899]

Есть фиксированный контейнер. В него будут помещаться различные картинки. Они могут быть гораздо больше или гораздо меньше этого блока. Большие картинки нужно поместить в центр блока и обрезать то, что выходит за его границы.
На ум приходит абсолютное позиционирование. Но оно не дает уникального способа для позиционирования любой картинки в центр одним правилом.
Т.е. left 50%, top 50%.

Answer 1

[iBird Rose]

Но оно не дает уникального способа для позиционирования любой картинки в центр одним правилом.

почему?
используй

left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

Answer 2

[GreatBOND]

display: flexbox

Answer 3

[Alexander]

<div class="img" style="background-image: url('my-image.png')"></div>

div.img{
width: 500px;
height: 500px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

Answer 4

[Андрей Б.]

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 5

[Сергей Горячев]

https://jsfiddle.net/webirus/fe61h1o7/

.block {
  display: flex;
  justify-content: center;
  align-items: center;
}