How to vertically and horizontally center text within a image?

I’m working on a React component using Tailwind CSS, and I’m trying to achieve a specific layout. I have a div with an image and two paragraphs inside it. I want the paragraphs to be centered both horizontally and vertically within the div so that they appear at the center of the image.

Here’s my current code:

<div className="flex flex-col items-center justify-center text-center">
  <img src="img/slider1.png" alt="slider1" className="mb-4" />
  <p className="font-bold">This paragraph is full of cats</p>
  <p>This paragraph is not.</p>
</div>

Despite using items-center and justify-center, the text is not aligning exactly at the center of the image. I want both paragraphs to be positioned at the center, both horizontally and vertically, within the div.

Any suggestions or corrections to my current approach would be greatly appreciated. Thank you!

>Solution :

1. Wrap your image and paragraphs
2. Use absolute positioning for the paragraphs
3. Center the text both horizontally and vertically.

<div className="relative">
  <img src="img/slider1.png" alt="slider1" />
  <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
    <p className="font-bold mb-2">This paragraph is full of cats</p>
    <p>This paragraph is not.</p>
  </div>
</div>