Как сделать row блоки с фоном картинкой и текстом по центру блока по середине в HTML?

Question

[Sp1keazyYT]

Доброй ночи, возникла проблема в процессе создания Row блоков, а именно проблема в установке по середине (вертикально и горизонтально) текста. Если есть возможность показать пример, то помогите пожалуйста.
Скрин, как должен выглядеть Row блок:

Answer 1

[Антон Усачев]

<style>
	.item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.item__image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.item__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.item__text {
		text-align: center;
		text-transform: uppercase;
		padding: 10px;
	}
</style>

<div class="item">
	<div class="item__image">
		<img src="/some-image.jpg" alt="">
	</div>
	<div class="item__text">
		<span>Some text</span>
	</div>
</div>