CSS центр любое изображение в DIV

Question

Допустим, у меня есть div с width: 300px и height: 200px
Я хочу, чтобы любое изображение внутри этой div быть сосредоточены как горизонтально, так и вертикально, независимо от того, если изображение больше или меньше, чем div;

Для изображений меньшего размера margin: 0 auto работает хорошо, но выше изображение выступает вправо и не центрируется.

Для больших изображений это работает:

height: 100%; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 

Я не мог найти любую комбинацию этих и не нашел решение, как прекрасно центровку изображения.

Answer 1

Добавить position: absolute в img и position: relative к div

.el { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    margin: 50px 150px; 
 
} 
 
img { 
 
    opacity: 0.4; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    position: absolute; 
 
}

<div class="el"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/50x50/000000/ffffff"> 
 
</div>

Answer 2

Попробуйте

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