Pour votre structure actuelle, vous avez deux solutions pour le faire fonctionner:

1) CSS

Enveloppez les éléments avec une div et utilisez cette astuce:

Voir cet exemple de violon de travail ! ^{(Si vous déplacez le cadre de haut en bas, vous voyez que la cible rest centrée verticalement.)}

 #childWrap { // the new element, the mentioned wrapper display: table; width: 100%; height: 100%; } #child { // your element that needs to be restyled display: table-cell; width: 100%; height: 100%; vertical-align: middle; } #popup_interstitial_table { // the element vertically aligned width: 50%; margin: -48px auto 0 auto; } 

Ce qui est fait ici est de définir l’élément wrapper pour qu’il s’affiche sous la forme d’une table occupant toute la largeur et la hauteur de son parent ( #parent parent).

Ensuite, nous pouvons définir le #child à afficher en tant que cellule de tableau et définir son contenu sur aligner verticalement au milieu.

Maintenant, le truc, puisque le #parent contient également un autre élément que vous devez restr en place, mais dont la hauteur est supprimée des calculs “centraux” pour la #popup_interstitial_table , nous devons extraire la #popup_interstitial_table avec une margin-top:-60px pour fixer sa position. La marge négative est la hauteur #popup_interstitial_pro_head_text .

Note importante:

Puisque vous avez cette structure, pour que le navigateur #popup_interstitial_pro_head_text le correctif, votre #popup_interstitial_pro_head_text doit fonctionner avec une seule unité. J’ai choisi px pour l’exemple.

Vous avez eu un mélange de % et em sur plusieurs déclarations!

Sur une note de côté:

Alignement vertical: centre;

Tu utilises:

alignement vertical: milieu;

Voir ce lien pour plus d’informations!

2) JQUERY

Avec jQuery, vous pouvez collecter l’espace occupé par la #popup_interstitial_table et calculer les valeurs de correctif supérieur et gauche nécessaires pour le maintenir centré verticalement:

Voir cet exemple de violon de travail ! ^{(Si vous déplacez le cadre de haut en bas, vous voyez que la cible rest centrée verticalement.)}

JQUERY

 function center() { var $target = $('#popup_interstitial_table'), $header = $('#popup_interstitial_pro_head_text'), fixTop = ($target.outerHeight(true)/2)-($header.outerHeight(true)/2), fixLeft = $target.outerWidth(true)/2; $target.css({ "margin-top": "-" + fixTop + "px", "margin-left" : "-" + fixLeft + "px" }); } $(document).ready(function() { center(); }); 

CSS

Pour éviter les calculs de script massifs, le CSS devrait être corrigé à ceci:

 #parent { position: relative; height: 100%; // this was added } #child { padding: 0% 0; height: 100%; // this was added } #popup_interstitial_table { width: 50%; margin: 0 auto 0 auto; background-color:#E7E7E7; padding: 1em 2.2em; font: 0.85em "Trebuchet MS", Arial, Helvetica, sans-serif; position: absolute; // this was added top: 50%; // this was added left: 50%; // this was added } 

Donc, répétez que sans changer votre structure actuelle, ce sont les deux solutions auxquelles je pourrais penser pour centrer votre élément!

Utilisez ce CSS:

 #child { display: table } #popup_interstitial_table { display: table-cell; vertical-align: middle; text-align: center } 

Et ajoutez-y votre autre CSS.

Voir Exemple de centrage vertical

et CSS: centrer les choses .

Je ne connais aucun bon moyen de centrer un élément verticalement sans utiliser de cellules de tableau. Dans ce cas, c’est assez simple, mais vous revenez à la disposition basée sur des tableaux, ce que vous essayez d’éviter, je suppose.

Question en réponse: Dans quelle mesure est-il important que l’élément soit centré verticalement?

Une autre option consiste à utiliser javascript pour définir les marges au moment du rendu.

Bonjour, vous pouvez obtenir votre résultat en deux étapes faciles: –

Il suffit de définir display: table-cell & vertical-align: middle to this this #popup_interstitial_table

 #popup_interstitial_table { background-color: #E7E7E7; display: table-cell; font: 0.85em "Trebuchet MS",Arial,Helvetica,sans-serif; height: 300px; margin: 5% auto 0; vertical-align: middle; width: 450px; } 

voir la démo: – http://jsfiddle.net/D8LLM/34/