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

我有一个Div和span在里面。我使用span作为标题元素。所以它应该只显示在：hover上。使用：hover类可以很好地工作

<>但是如何确保跨度元素恰好出现在父图像的中间，像下面的图像。

而不是

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

---

您只需应用

变换

，例如

变换：translateX（-50%）

。在转换中，%是元素本身，而不是您可能期望的父元素。

您可以在父元素中使用

flex

和

justify content:space around

：

.haspooltip{
宽度：30px；
高度：30px；
利润率：100像素；
背景色：红色；
位置：相对位置；
显示：flex；/*添加flex*/
对齐内容：空格；/*添加此内容*/
}
.头衔{
可见性：隐藏；
位置：相对；/*更改为相对*/
顶部：-20px；/*将顶部减小一点*/
左：0px；
空白：nowrap；/*用于带有空格的很长文本的场景*/
}
.hasToolTip:悬停.title{
能见度：可见；
}

16753r2364
16753ASDASDASDR2364
16753 ASDASDASDR2364 ASDASDADAS

只需将

左：50%

添加到您的演示中即可

.haspooltip{
宽度：30px；
高度：30px；
利润率：100像素；
背景色：红色；
位置：相对位置；
}
.头衔{
可见性：隐藏；
位置：绝对位置；
顶部：-30px；
左：50%；
转化：translateX（-50%）；
空白：nowrap；/*所以当有空格字符时，文本不会断行*/
}
.hasToolTip:悬停.title{
能见度：可见；
}

16753r2364
16753R2364然后是一些

这是您的目标，将鼠标悬停在底部div上：

.haspooltip{
宽度：30px；
高度：30px；
利润率：100像素；
背景色：红色；
位置：相对位置；
}
.头衔{
可见性：隐藏；
顶部：-30px；
文本对齐：居中；
位置：绝对位置；
转换：translateX（-50%）
}
.hasToolTip:悬停.title{
能见度：可见；
}

JS-Bin
16753r2364
16753r2364

它对我不起作用。如果您的浏览器支持率很高（如支持许多较旧的浏览器），请使用非flex方式。谢谢。超级酷。但在下面接受，因为我无法使用您的解决方案。