Comment placer un centre div de la fenêtre après le défilement

Vous pouvez le faire avec une largeur fixe positionnée au centre et avec des marges négatives avec la moitié de la largeur et la moitié de la hauteur. Donc, pour un div avec id your_div qui a une taille your_div , vous ferez:

 #your_div { width: 200px; height: 200px; position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; } 

J'étais à la recherche de moi-même et ce message est apparu en premier. Avec d'autres recherches, j'ai trouvé ce lien plutôt que je pense être la meilleure solution de navigateur croisé:

Utilisation de jQuery pour centrer un DIV sur l'écran

Fondamentalement pour utiliser jquery pour surmonter les problèmes IE6, il suffit de prendre en compte la fenêtre $ (window) .scrollTop () et $ (window) .scrollLeft ().

J'espère que cela t'aides.

Steve

Je suggère la solution suivante:

1) Dans JS lorsque vous souhaitez afficher une fenêtre:

 { var width = $(window).width(); var heigth = $(window).height(); var myWindow = $('.my-window'); myWindow .show('fast'); myWindow .offset( { left: (width - myWindow .width()) / 2 + $(window).scrollLeft(), top: (heigth - myWindow .height()) / 2 + $(window).scrollTop() }); } 

2) dans CSS: .my-window

 { position: fixed; } 

Si vous devez supporter IE 6, vous devez ajouter l'élément div au corps et définir le poste comme "absolu". Configurez l'attribut de position de l'élément du corps comme "relatif". Et appliquez le reste des styles proposés par reko_t. Cela devrait garder le div au centre pendant que vous faites défiler.

En dehors de cela, je vous suggère de considérer un autre cas lorsque vous souhaitez placer certains div dans le centre de la page. Si la taille de votre fenêtre est plus petite que le div que vous positionnez dans le centre alors que vous faites défiler, vous verrez la même partie du div jusqu'à redimensionner la fenêtre pour être plus grande que celle de la div.

Pour résoudre ce cas, vous devriez aller pour une solution javascript plutôt que pour une solution css pure. Vous devez définir un auditeur de redimensionnement de la fenêtre. Si la fenêtre de la fenêtre redimensionnée est plus petite, placez la div dans le coin supérieur gauche de la fenêtre et désactivez l'écouteur d'incrustation. Si la fenêtre de la fenêtre redimensionnée est plus grande que la div, alors votre écouteur d'onscroll devrait appliquer les styles proposés par reko_t.