JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-container">
	<p> One line Content works perfact</p>
</div>
<div class="image-container">
	<p> Two line Content:Lorem Ipsum is simply dummy text of the printing </p>
</div>
<div class="image-container">
	<p> Three Line Content:Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

CSS

.image-container { border:1px solid #CCC; height:300px; width:300px; position:relative; float:left; margin-left:20px; }
	p {position:absolute; top:40%; text-align:center; width:100%; }