基於高度的位置元素垂直中心

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的一半高度的負值。