JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
		<div class="cell">
			<div class="cell__content">
				<p>Текст внутри ячейки</p>
			</div>
			<div class="cell__info"><div class="cell__info_inside">
				<p>Текст внутри всплывающего элемента, <br> выровненный по вертикали</p>
			</div></div>
		</div>
		<div class="cell">
			<div class="cell__content">
				<p>Текст внутри ячейки</p>
			</div>
			<div class="cell__info"><div class="cell__info_inside">
				<p>Текст внутри всплывающего элемента, <br> выровненный по вертикали</p>
			</div></div>
		</div>
		<div class="cell">
			<div class="cell__content">
				<p>Текст внутри ячейки</p>
			</div>
			<div class="cell__info"><div class="cell__info_inside">
				<p>Текст внутри всплывающего элемента, <br> выровненный по вертикали</p>
			</div></div>
		</div>
	</div>

CSS

.table { display: table; width: 100%; height: 300px; min-width: 400px;}
		.cell { display: table-cell; position: relative;transition: opacity;}
			.cell__info { 
				position: absolute; 
				bottom: 0; 
				top: 0; 
				width: 100%;
				opacity: 0;
				background: red;
			}
				.cell__info:before {
					display: inline-block;
					height: 100%;
					width: 0;
					vertical-align: middle;
					content: '';
				}
				.cell__info_inside {
					display: inline-block;
					vertical-align: middle;
				}
			.cell__info:hover { opacity: 1;}