JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-centering block-decor">
    <img src="https://1x.com/images/user/d2d7e82164fd8b3103c8ee091360ab09-ld.jpg" alt="" width="50%">
</div>

<div class="content-centering block-decor">
    <img src="https://1x.com/images/user/d2d7e82164fd8b3103c8ee091360ab09-ld.jpg" alt="">
</div>

CSS

.content-centering{
	display:flex;
	justify-content: center; /*центрируем элемент по горизонтали */
    align-items: flex-end; /* и вертикали */
    width: 200px; /* задали размеры блоку-родителю */
	height: 200px;
	overflow: hidden; /* если элемент больше блока-родителя – обрезаем лишнее */
}

.block-decor{
    background-color: #ccc;
    margin: 8px;
    float: left;
}