使用Flexbox实现图片内文字居中失败的技术求助

原代码的核心问题 #

• .top-content未添加display: flex，导致你写的justify-content、align-items等Flex属性完全无效
• 文字和图片都是默认块级元素，会按流布局上下排列，无法实现文字覆盖在图片上的效果
• 缺少定位逻辑支撑文字与图片的层级重叠

修正后的代码 #

CSS 部分

.top-content {
  position: relative; /* 作为内部绝对定位元素的参考容器 */
  width: 1200px;
  margin-top: 69px;
}

.top-image {
  border: 1px solid seashell;
  height: 700px;
  width: 100%; /* 继承容器宽度，保证尺寸匹配 */
  display: block; /* 消除图片默认的行内元素间距 */
}

.top-content .text-wrap {
  position: absolute; /* 脱离文档流，覆盖在图片上方 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 实现不受内容高度影响的精准居中 */
  width: 100%;
  text-align: center;
}

.top-content h2,
.top-content h4 {
  color: seashell;
  background-color: black;
  margin: 0; /* 清除标题默认外边距，避免堆叠错位 */
  padding: 10px 0; /* 增加内边距优化视觉体验 */
}

HTML 部分

<header>
  <div class="header">
    <img class="tea-cozy-logo" src="resources/images/img-tea-cozy-logo.png" alt="tea cozy logo" />
    <div class="header-links">
      <h3>Mission</h3>
      <h3>Featured Tea</h3>
      <h3>Locations</h3>
    </div>
  </div>
</header>
<div class="top-content">
  <img class="top-image" src="resources/images/img-mission-background.jpg" alt="pot of tea leaves" />
  <!-- 用容器包裹文字，统一控制定位逻辑 -->
  <div class="text-wrap">
    <h2>Our Mission</h2>
    <h4>
      Handipicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea
    </h4>
  </div>
</div>

关键修改说明 #

1. 给.top-content设置position: relative，为内部绝对定位元素提供定位基准
2. 新增text-wrap容器包裹标题，通过一次定位实现两个元素的整体居中，逻辑更简洁
3. transform: translate(-50%, -50%)是适配性最强的居中方案，无需提前计算文字高度
4. 清除标题默认外边距、增加内边距，避免布局错位并提升视觉舒适度

内容的提问来源于stack exchange，提问作者beicojão