如何使用 offsetWidth 和 offsetLeft 将 div 动态居中于另一个 div答案

【问题标题】：How to dynamically center a div over another div using offsetWidth and offsetLeft如何使用 offsetWidth 和 offsetLeft 将 div 动态居中于另一个 div
【发布时间】：2019-04-10 11:22:06
【问题描述】：

如何在div 上设置left，以便它始终显示在另一个div 的中心，尽管宽度不同？

jsFiddle：http://jsfiddle.net/y04nse5x/

我试图让每个标签在点上完美对齐，而不需要容器。我确信offsetWidth 和offsetLeft 可以做到这一点，但我就是无法正确计算。

这些点被放置在页面上的任意位置，每个点都有一个mouseover 事件监听器，它将在点上放置一个标签。我可以使用offsetLeft 让标签出现在点上，但它没有居中，因为标签的宽度可能因不同的文本而不同，这取决于它出现在哪个点上。

我遇到此问题的实际网站：http://briennakh.me/world-around-you/（将鼠标悬停在右上角的菜单按钮上）

【问题讨论】：

标签： javascript jquery css centering

【解决方案1】：

您必须考虑描述宽度和按钮宽度。

这是一个小提琴：http://jsfiddle.net/khe8j2ms/

但我可能会使用额外的容器和样式：

left: 50%;
transform: translateX(-50%);

【讨论】：

谢谢！我想在未来以一种更简单的方式来做这件事，可能更易于维护

【解决方案2】：

在您的 CSS 中，您正在设置描述的 left。让我们看看left等于什么。

希望我的图表有意义，因此：

var leftValue = this.offsetLeft-(description.offsetWidth-this.offsetWidth)/2;

http://jsfiddle.net/y04nse5x/1/

【讨论】：