css - 居中对齐大于父宽度的子绝对元素

Question

我在其中有一个 Div 和 span。我使用 span 作为标题元素。所以它应该只出现在 :hover 上。使用 :hover 类可以正常工作。

但是我怎样才能确保 span 元素恰好出现在父元素的中间，如下图所示。

代替

请注意，span 元素的宽度不是固定的。

fiddle

Answer 1

只需将 left: 50% 添加到您的演示中 (here updated)

.hasToolTip {
  width: 30px;
  height: 30px;
  margin: 100px;
  background-color: red;
  position: relative;
}
.title {
  visibility: hidden;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;          /* so text don't break line when have space char */
}
.hasToolTip:hover .title {
  visibility: visible;
}

<div class="hasToolTip">
  <span class="title">16753r2364</span>
</div>
<div class="hasToolTip">
  <span class="title">16753r2364and then some</span>
</div>