React+Tailwind实现文本在图片容器中垂直水平居中的问题

你的问题出在当前布局是把图片和文本按垂直流排列，文本自然在图片下方，没法实现"位于图片中心"的效果。要让文本覆盖在图片上并居中，需要结合相对定位+绝对定位来调整：

修正后的代码 #

<div className="relative">
  <img src="img/slider1.png" alt="slider1" className="w-full h-auto" />
  <div className="absolute inset-0 flex flex-col items-center justify-center text-center text-white">
    <p className="font-bold">This paragraph is full of cats</p>
    <p>This paragraph is not.</p>
  </div>
</div>

关键改动说明： #

• 外层div添加relative：让内部绝对定位的元素以它为基准定位
• 图片添加w-full h-auto：确保图片自适应容器宽度，同时保持比例（可根据需求替换为固定尺寸类，比如w-64）
• 文本容器使用absolute inset-0：让文本容器占满外层div的整个空间，完全覆盖图片
• 文本容器保留flex flex-col items-center justify-center text-center：实现内部两段文本的垂直+水平居中
• 可选添加text-white（或其他高对比色）：避免文本和图片内容重叠导致看不清，也可以加bg-black/50给文本区域加半透明背景增强可读性

内容的提问来源于stack exchange，提问作者TAHER El Mehdi