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

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>

jquery的：

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

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