如何通过CSS在div容器内实现文字叠加居中在每张图片正中央的布局

• 文字设置的position: relative是基于元素原本的文档流位置偏移，不会脱离文档流叠加到图片上，所以文字只会在图片原本的上方位置移动。
• 重复定义了.project/.project2/.project3、.text/.text2/.text3三组完全相同的样式，冗余代码过多，修改样式需要重复操作。

1. 统一类名简化HTML #

删除所有重复的类名，所有项目容器、文字都用同一个类，同时把图片的内联样式移到CSS中统一管理：

<div class="projects">
  <div class="project">
    <img src="https://via.placeholder.com/150/">
    <div class="text">heading1</div>
  </div>
  <div class="project">
    <img src="https://via.placeholder.com/150/">
    <div class="text">heading2</div>
  </div>
  <div class="project">
    <img src="https://via.placeholder.com/150/">
    <div class="text">heading3</div>
  </div>
</div>

2. 重写CSS实现居中效果 #

删掉所有重复的类定义，核心修改文字的定位方式：

.projects {
  width: 54%;
  margin: auto;
}

/* 所有项目容器共用样式 */
.project {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

/* 消除图片默认行高带来的缝隙，统一图片宽度 */
.project img {
  display: block;
  width: 100%;
}

/* 所有文字共用样式 */
.text {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: #FBB2B4;
  text-decoration: none;
  padding: 8px 12px;
  /* 核心修改：改用绝对定位，相对于父容器.project定位 */
  position: absolute;
  /* 精准居中：先把文字的左上角移到父容器中心，再用自身偏移拉回正中心 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

• 不管图片高度是多少、文字长度是多少，都会自动居中在图片正中心，不需要手动调整top值。
• 后续修改文字样式、容器宽度，只需要修改一处CSS即可，不需要重复改三个类的代码。

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