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

Question

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

Answer 1

一个可行的思路是，那个红色的标签由于是不固定宽度的，因此它自身不要绝对定位，而是给它外面再增加一层，这增加的一层div进行绝对定位。绝对定位的元素只用作容器，设置为能容纳最大的标签宽度。题主可以参考一下这段代码：<div&nbsp;class="total-container"> &nbsp;&nbsp;<div&nbsp;class="item"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="image-placeholder"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="label-container"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="label">奖率10%</span> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;</div> &nbsp;&nbsp;<div&nbsp;class="item"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="image-placeholder"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="label-container"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="label">奖率</span> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;</div> &nbsp;&nbsp;<div&nbsp;class="item"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="image-placeholder"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="label-container"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="label">返奖率10%</span> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;</div></div>.total-container{&nbsp; width: 400px;&nbsp; min-height: 100px;&nbsp; margin: 20px auto;&nbsp; padding: 20px;&nbsp; border: 1px dotted #369;&nbsp; overflow: hidden;}.item{&nbsp; position: relative;&nbsp; margin-right: 20px;&nbsp; float: left;}.image-placeholder{&nbsp; width: 70px;&nbsp; height: 70px;&nbsp; background: #9fa8da;&nbsp; border-radius: 50%;}.label-container{&nbsp; position: absolute;&nbsp; width: 200%;&nbsp; left: -50%;&nbsp; top: 50px;&nbsp; text-align: center;}.label{&nbsp; display: inline-block;&nbsp; height: 24px;&nbsp; padding: 0 20px;&nbsp; border-radius: 15px;&nbsp; background: #d32f2f;&nbsp; color: #fff;&nbsp; font-size: 12px;&nbsp; line-height: 24px;}效果是：