如何实现文本覆盖图片且针对不同位数数字居中对齐？

不用transform硬偏移的话，有几种更可靠的方法，不管数字是1位、2位还是多位，都能精准居中覆盖在图片上：

方案一：Flex布局+绝对定位 #

这是兼容性好、自适应强的通用方案：

HTML结构 #

<div class="img-wrap">
  <img src="你的图片路径" alt="图标">
  <span class="num-text">7</span>
</div>

CSS代码 #

.img-wrap {
  position: relative;
  /* 让容器宽度自适应图片宽度 */
  display: inline-block;
}
.img-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.num-text {
  /* 绝对定位占满整个图片容器 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Flex实现水平+垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 自定义文本样式 */
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

原理：父容器相对定位，文本绝对定位铺满容器，通过Flex的align-items和justify-content自动让文本居中，完全不受数字位数影响。

方案二：Grid布局（更简洁） #

用Grid可以让图片和文本直接重叠，代码更短：

HTML结构 #

<div class="img-wrap">
  <img src="你的图片路径" alt="图标">
  <span class="num-text">15</span>
</div>

CSS代码 #

.img-wrap {
  display: grid;
  /* 容器宽度自适应图片 */
  inline-size: fit-content;
}
/* 让图片和文本占据同一个网格区域 */
.img-wrap img, .num-text {
  grid-area: 1 / 1;
}
.num-text {
  /* 直接居中 */
  place-self: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

原理：Grid布局下，两个元素指定同一网格区域就会重叠，place-self: center直接实现水平垂直居中，无需额外定位设置。

方案三：绝对定位+文本对齐（适合固定高度图片） #

如果图片高度固定，也可以用这种传统方法：

.img-wrap {
  position: relative;
  display: inline-block;
}
.num-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 水平居中 */
  text-align: center;
  /* 垂直居中：line-height值等于图片高度 */
  line-height: 40px; /* 假设图片高度是40px */
  color: #fff;
  font-size: 18px;
}

缺点是图片高度变化时需要同步修改line-height，灵活性不如前两种方案。

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