Centrer une position: élément fixe

Je voudrais faire une position: fixed; Boîte contextuelle centrée sur l’écran avec une largeur et une hauteur dynamics. J’ai utilisé la margin: 5% auto; pour ça. Sans position: fixed; il centre bien horizontalement, mais pas verticalement. Après avoir ajouté la position: fixed; , même pas centré horizontalement.

Voici l’ensemble complet:

 .jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } 
 
This should be inside a horizontally and vertically centered box.

Comment puis-je centrer cette boîte à l’écran avec CSS?

En gros, vous devez placer le top et la left à 50% pour centrer le coin supérieur gauche du div. Vous devez également définir la margin-top et la margin-left à la moitié négative de la hauteur et de la largeur du div pour déplacer le centre vers le milieu du div.

Ainsi, à condition que (mode standard), cela devrait:

 position: fixed; width: 500px; height: 200px; top: 50%; left: 50%; margin-top: -100px; /* Negative half of height. */ margin-left: -250px; /* Negative half of width. */ 

Ou, si vous ne vous souciez pas du centrage vertical et des anciens navigateurs tels que IE6 / 7, vous pouvez également append left: 0 et right: 0 à l’élément ayant une margin-left et une margin-right de auto , de sorte que l’élément positionné fixe ayant une largeur fixe sait où ses décalages gauche et droit commencent. Dans votre cas donc:

 position: fixed; width: 500px; height: 200px; margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */ left: 0; right: 0; 

Encore une fois, cela ne fonctionne que dans IE8 + si vous vous souciez d’IE, et cela ne se concentre que horizontalement, pas verticalement.

Je veux créer une fenêtre contextuelle centrée sur l’écran avec une largeur et une hauteur dynamics.

Voici une approche moderne pour centrer horizontalement un élément avec une largeur dynamic – il fonctionne dans tous les navigateurs modernes; le support peut être vu ici .

Exemple mis à jour

 .jqbox_innerhtml { position: fixed; left: 50%; transform: translateX(-50%); } 

Pour le centrage vertical et horizontal, vous pouvez utiliser les éléments suivants:

Exemple mis à jour

 .jqbox_innerhtml { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } 

Vous voudrez peut-être append plus de propriétés préfixées par le fournisseur (voir les exemples).

Ou ajoutez simplement left: 0 et right: 0 à votre CSS d’origine, ce qui le fait se comporter de la même manière qu’un élément non fixe normal et que la technique habituelle de marge automatique fonctionne:

 .jqbox_innerhtml { position: fixed; width:500px; height:200px; background-color:#FFF; padding:10px; border:5px solid #CCC; z-index:200; margin: 5% auto; left: 0; right: 0; } 

Notez que vous devez utiliser un code HTML DOCTYPE (X) valide pour qu’il se comporte correctement dans Internet Explorer (ce que vous devriez bien sûr avoir de toute façon ..!)

Ajouter un conteneur comme:

 div { position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; } 

Ensuite, mettez votre boîte dans cette division fera le travail.

Ajoutez simplement:

 left: calc(-50vw + 50%); right: calc(-50vw + 50%); margin-left: auto; margin-right: auto; 

Cette solution ne vous oblige pas à définir une largeur et une hauteur à votre div popup.

http://jsfiddle.net/4Ly4B/33/

Et au lieu de calculer la taille de la popup, et moins la moitié vers le haut, javascript redimensionne le popupContainer pour remplir tout l’écran …

(100% hauteur, ne fonctionne pas lors de l’utilisation de l’affichage: cellule de table; (qui doit centrer quelque chose verticalement)) …

En tout cas ça marche 🙂

 left: 0; right: 0; 

Ne fonctionnait pas sous IE7.

Changé en

 left:auto; right:auto; 

Commencé à travailler, mais dans les autres navigateurs, il ne fonctionne plus! Donc utilisé de cette façon pour IE7 ci-dessous

 if ($.browser.msie && parseInt($.browser.version, 10) <= 7) { strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'}); } 

Vous pouvez fondamentalement l’envelopper dans une autre div et définir sa position à fixed .

 .bg { position: fixed; width: 100%; } .jqbox_innerhtml { width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } 
 
This should be inside a horizontally and vertically centered box.

Une réponse possible:

     CSS Center Background Demo    
World
Wide
Web

Essayez d’utiliser ceci pour les éléments horizontaux qui ne seront pas centrés correctement.

width: calc (largeur: 100% – largeur quelle que soit la distance )

Par exemple, si votre barre de navigation latérale est 200px:

 width: calc(100% - 200px); 

La seule solution à toute épreuve consiste à utiliser la table align = center comme dans:

 
...

Je ne peux pas croire que les gens du monde entier gaspillent ces quantités abondantes à un temps stupide pour résoudre un problème aussi fondamental que celui de centrer un div. La solution css ne fonctionne pas pour tous les navigateurs, la solution jquery est une solution informatique et n’est pas une option pour d’autres raisons.

J’ai perdu trop de temps à répétition pour éviter d’utiliser la table, mais l’expérience me dit de cesser de la combattre. Utilisez le tableau pour div diviser. Fonctionne tout le temps dans tous les navigateurs! Ne t’inquiète plus jamais.