centre aligner un div position fixe

J’essaie d’obtenir un div qui a la position:fixed centre position:fixed aligné sur ma page.

J’ai toujours été capable de le faire avec des divs absolument positionnés en utilisant ce “hack”

 left: 50%; width: 400px; margin-left:-200px 

… où la valeur de margin-left est la moitié de la largeur du div.

Cela ne semble pas fonctionner pour les divs de positions fixes, mais les place avec leur coin le plus à gauche à 50% et ignore la déclaration de marge gauche.

Avez-vous des idées sur la façon de résoudre ce problème afin de pouvoir centrer les éléments fixes positionnés?

Et je vais append un bonus M & M si vous pouvez me dire une meilleure façon de centrer les éléments absolument positionnés que ce que j’ai décrit plus haut.

Pour ceux qui ont le même problème, mais avec un design réactif, vous pouvez également utiliser:

 width: 75%; position: fixed; left: 50%; margin-left: -37.5%; 

En faisant cela, vous garderez toujours votre div fixe à l’écran, même avec un design réactif.

La réponse de Koen ne centre pas exactement l’élément.

La méthode appropriée consiste à utiliser la propriété de CCS3 transform . Bien que ce ne soit pas supporté dans certains anciens navigateurs . Et nous n’avons même pas besoin de définir une width fixe ou relative.

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

Jsfiddle comparaison de travail ici .

Un bon moyen de centrer un élément “fixe” serait de rendre un élément “central” fixe et avec une largeur de 100%, et tout ce qu’il contient se trouve au centre du “centre” de 100% de largeur.

Le CSS serait:

 #center{ position:fixed; width: 100%; //this basically stretches all over the window as fixed } 

Le html serait:

   
...elements

La même méthode peut être appliquée au positionnement absolu des éléments.

UPDATE: Et pour les sceptiques qui pensent que le tag central est obsolète, il peut être remplacé par un div wrapper qui a la propriété align = “center” appliquée. Vous pourriez même avoir supprimé l’alignement et utiliser text-align: center .

Du post ci-dessus, je pense que le meilleur moyen est

  1. Avoir un div fixe avec width: 100%
  2. A l’intérieur du div, créez un nouveau div statique avec margin-left: auto et margin-right: auto ou pour la table make it align="center" .
  3. Tadaaaah, vous avez centré votre division fixe maintenant

J’espère que cela aidera.

Les div normaux doivent utiliser margin-left: auto et margin-right: auto , mais cela ne fonctionne pas pour les divs fixes. La solution est similaire à celle d’ Andrew , mais n’utilise pas la chose obsolète

. Fondamentalement, il suffit de donner à la division fixe un wrapper.

 #wrapper { width: 100%; position: fixed; background: gray; } #fixed_div { margin-left: auto; margin-right: auto; position: relative; width: 100px; height: 30px; text-align: center; background: lightgreen; } 
 

Si vous savez que la largeur est de 400 pixels, ce serait le moyen le plus simple de le faire, je suppose.

  left: calc(50% - 200px); 

Cela fonctionne si vous voulez que l’élément traverse la page comme une autre barre de navigation.

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

J’ai utilisé ce qui suit avec Twitter Bootstrap (v3)

 

Stuff - rows - cols etc

C’est-à-dire créer un élément de pleine largeur qui est en position fixe et y enfoncer un conteneur, le conteneur est centré par rapport à la largeur totale. Devrait bien se comporter aussi de manière réactive.

Il est assez facile d’utiliser la largeur: 70%; à gauche: 15%;

Définit la largeur de l’élément à 70% de la fenêtre et laisse 15% des deux côtés

Si vous souhaitez centrer l’alignement d’une position fixe div verticalement et horizontalement, utilisez cette option.

 position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); 

Une solution utilisant une boîte souple; entièrement réactif:

 parent_div { position: fixed; width: 100%; display: flex; justify-content: center; } child_div { /* whatever you want */ }