Élément de position centre vertical basé sur la hauteur

Question

J'ai un div qui peut avoir différentes hauteurs en fonction de la taille du texte qu'il contient. J'utilise jquery pour l'afficher lorsqu'un utilisateur survole une icône. Je veux que la div apparaisse au centre vertical de cette icône. Je ne peux pas utiliser la méthode normale de:

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

parce que je ne peux pas préciser la hauteur de l'élément en raison des variations de hauteur.

Des idées sur comment je pourrais faire ceci? Merci.

Answer 1

Voici une solution très simple qui devrait fonctionner pour n'importe quelle hauteur d'élément.

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}); 

Nous obtenons la hauteur de l'élément, puis la diviser en deux. Nous fixons ensuite le margin-top au négatif de la moitié de la hauteur de la div.