如何用CSS实现文本居中覆盖图片且无需逐个调整位置

问题出在你给.title用了position: absolute，但没有给它的父元素设置相对定位。绝对定位的元素如果没有最近的定位父元素，会相对于整个文档定位，所以多个图片的标题会挤在一起，需要逐个调整。

修复步骤： #

1. 给.category添加position: relative，让每个标题的绝对定位以自己的分类容器为基准
2. 统一调整.title的定位样式，让它在图片上方按需求对齐（比如居中）

修改后的完整代码： #

CSS

.container {
  height: 1224px;
  width: 90%;
  margin: 100px auto;
}

.row {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.category {
  position: relative; /* 关键：添加相对定位，作为标题的定位基准 */
  /* 可选：若需要固定宽度，可设置width: 50%或其他值 */
}

.image {
  height: 300px;
}

.image img {
  height: 100%;
  width: 100%;
  border-radius: 8px;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%; /* 配合translate实现居中 */
  transform: translate(-50%, -50%); /* 让标题自身完美居中 */
  margin: 0; /* 清除h2默认外边距 */
  color: white; /* 可选：根据图片颜色调整文字颜色，增强可读性 */
  text-shadow: 0 0 3px rgba(0,0,0,0.8); /* 可选：添加文字阴影，避免和图片融合 */
}

HTML

<div class="container">
  <div class="row">
    <div class="category">
      <div class="image">
        <img src="img1.jpeg" alt="">
      </div>
      <div class="title">
        <h2>Title 1</h2>
      </div>
    </div>
    <div class="category">
      <div class="image">
        <img src="img1.jpeg" alt="">
      </div>
      <div class="title">
        <h2>Title 2</h2>
      </div>
    </div>
  </div>
</div>

关键说明： #

• position: relative加在.category上，为每个图片+标题组建立独立的定位坐标系，确保标题只在当前图片范围内定位
• transform: translate(-50%, -50%)是让标题在容器中居中的常用技巧：top:50%和left:50%是让标题左上角对齐容器中心，translate则把标题自身往左上移动一半宽高，实现整体居中
• 后续要调整所有标题的位置，只需修改.title的top、left等属性，所有图片上的标题会同步变化，无需逐个调整

内容的提问来源于stack exchange，提问作者Shahzad Gul