居中对齐大于父宽度的子绝对元素答案

【问题标题】：Center align child absolute element with more than parent width居中对齐大于父宽度的子绝对元素
【发布时间】：2016-07-29 04:09:56
【问题描述】：

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

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

而不是

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

fiddle

【问题讨论】：

如果您的浏览器支持率很高（如支持许多旧浏览器），两种解决方案都有效（答案如下）然后使用非弹性方式

标签： css

【解决方案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>

【讨论】：

【解决方案2】：

您可以在父元素中使用flex 和justify-content: space-around：

.hasToolTip {
  width: 30px;
  height: 30px;
  margin: 100px;
  background-color: red;
  position: relative;
  display: flex; /* add flex */
  justify-content: space-around; /* add this */
}
.title {
  visibility: hidden;
  position: relative;  /* change to relative */
  top: -20px; /* decrease top a bit */
  left: 0px;
  white-space: nowrap; /* for scenarios with very long text with spaces */
}
.hasToolTip:hover .title {
  visibility: visible;
}

<div class="hasToolTip">
  <span class="title">16753r2364</span>
</div>
<div class="hasToolTip">
  <span class="title">16753asdasdasdasasdr2364</span>
</div>
<div class="hasToolTip">
  <span class="title">16753asdasdasdasasdr2364 asdasdasdasdasdasdadas</span>
</div>

参考文献

flex

justify-content

【讨论】：

谢谢。它超级酷。但在下面接受，因为我无法使用您的解决方案。

【解决方案3】：

这是你想要的，将鼠标悬停在底部 div 上：

.hasToolTip {
  width: 30px;
  height: 30px;
  margin: 100px;
  background-color: red;
position:relative;
}

.title {
   visibility: hidden;
   top: -30px;  
   text-align:center;
       position: absolute;
   transform: translateX(-50%)
}

.hasToolTip:hover .title {
   visibility: visible; 
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="hasToolTip">
    <span class="title">16753r2364</span>
  </div>
  <div>
    <div style='text-align:center'>
  <div class="hasToolTip">
    <span class="title">16753r2364</span>
  </div>
      
  </div>
</body>
</html>

http://jsbin.com/zonopukeku/1/edit?html,css,js,output

【讨论】：

【解决方案4】：

您可以简单地应用transform，例如transform: translateX(-50%)。在转换中，% 是元素本身，而不是您可能期望的父元素。

【讨论】：

它对我不起作用。可以换个链接吗