一个可行的思路是，那个红色的标签由于是不固定宽度的，因此它自身不要绝对定位，而是给它外面再增加一层，这增加的一层p进行绝对定位。绝对定位的元素只用作容器，设置为能容纳最大的标签宽度。

题主可以参考一下这段代码：

<p class="total-container">
  <p class="item">
    <p class="image-placeholder"></p>
    <p class="label-container">
      <span class="label">奖率10%</span>
    </p>
  </p>
  <p class="item">
    <p class="image-placeholder"></p>
    <p class="label-container">
      <span class="label">奖率</span>
    </p>
  </p>
  <p class="item">
    <p class="image-placeholder"></p>
    <p class="label-container">
      <span class="label">返奖率10%</span>
    </p>
  </p>
</p>

.total-container{
  width: 400px;
  min-height: 100px;
  margin: 20px auto;
  padding: 20px;
  border: 1px dotted #369;
  overflow: hidden;
}
.item{
  position: relative;
  margin-right: 20px;
  float: left;
}
.image-placeholder{
  width: 70px;
  height: 70px;
  background: #9fa8da;
  border-radius: 50%;
}
.label-container{
  position: absolute;
  width: 200%;
  left: -50%;
  top: 50px;
  text-align: center;
}
.label{
  display: inline-block;
  height: 24px;
  padding: 0 20px;
  border-radius: 15px;
  background: #d32f2f;
  color: #fff;
  font-size: 12px;
  line-height: 24px;
}

效果是：

由于要设置层次原因，中奖率要覆盖图片一小部分，只能使用定位，元素没有宽高如何设置居中呢？

父元素：text-align: center;或者自身先block再margin:0 auto;

父级：text-align: center;
子级：display: inline-block; margin:0 auto;

使用flex布局 父元素 displaty: flex; justify-content:center ;

<p style="text-align:center">
     <span>奖率</span>
    <p>劲爆推荐王</p>
</p>

父元素text-align:center不就可以了么？