Html 相对于多条线水平居中绝对定位的对象<；a>；标签？

当我试图创建一个css触发的工具提示并将其悬停在链接上时，我遇到了一个奇怪的问题。根据我的理解，将绝对定位的对象水平居中的标准方法是：

parent { position: relative }
child  { position: absolute; left: 50%; transform: translateX(-50%) }

这很好，但是当父对象是

请注意，在本例中，将鼠标悬停在顶部链接“text\nunEventText”上会产生一个略偏右的工具提示

同时，将鼠标悬停在底部链接“文本”上会产生一个完全居中的工具提示

有人知道如何修复多行标签工具提示的居中吗？
我找到了一个解决方案！通过使用空div作为工具提示的“锚定”，div将自动占据父级的最大宽度，但div本身将位于新行上，这意味着其x位置不会被文本偏移。然后，如果
工具提示容器
div是
工具提示锚点
的子元素，我们可以使用上面介绍的传统CSS3方法将其水平居中

我找到了解决办法！通过使用空div作为工具提示的“锚定”，div将自动占据父级的最大宽度，但div本身将位于新行上，这意味着其x位置不会被文本偏移。然后，如果
工具提示容器
div是
工具提示锚点
的子元素，我们可以使用上面介绍的传统CSS3方法将其水平居中

在这里很好用Firefox@dippas我可以看出使用ChromeFirefox的问题似乎是Y轴而不是X轴有问题；文本工具提示比Firefox上应有的高度高1行，而X轴看起来不错。在Chrome和IE11上，X轴是断开的，但Y轴是好的。可能的双倍绝对不是重复的-请参阅下面我的解决方案。我甚至在我的原始问题中的链接中包含了“响应性解决方案”的答案Firefox@dippas我可以看出使用ChromeFirefox的问题似乎是Y轴而不是X轴有问题；文本工具提示比Firefox上应有的高度高1行，而X轴看起来不错。在Chrome和IE11上，X轴是断开的，但Y轴是好的。可能的双倍绝对不是重复的-请参阅下面我的解决方案。我甚至在我最初的问题中的链接中包含了“响应性解决方案”的答案。