定位元素没有宽度如何居中显示

Question

元素没有宽高，而且使用的定位；

Answer 1

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

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

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

.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;

}

效果是：