jquery - 根据高度定位元素垂直中心

Question

我有一个 div，它可以根据其中文本的大小具有不同的高度。当用户将鼠标悬停在图标上时，我使用 jquery 来显示它。我希望 div 出现在该图标的垂直中心。我无法使用以下常规方法:

height: 100px; top: 50%; margin-top: -50px;

因为由于高度的变化，我无法指定元素的高度。

关于如何执行此操作的任何想法？谢谢。

Answer 1

这是一个非常简单的解决方案，适用于任何元素高度。

HTML:

<div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

j查询:

var margin = $('.container').height()/2;
$('.container').css({'margin-top' : -margin});

我们得到元素的高度，然后把它分成两半。然后我们将 margin-top 设置为 div 高度的一半的负值。