centre alignant une position fixe div

J'essaye d'obtenir un div qui a le position:fixedcentre aligné sur ma page.

J'ai toujours pu le faire avec des divs parfaitement positionnés en utilisant ce "hack"

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

... où la valeur de la marge gauche est la moitié de la largeur du div.

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

Des idées sur la façon de résoudre ce problème afin que je puisse centrer les éléments positionnés fixes?

Et je vais ajouter un bonus M&M si vous pouvez me dire une meilleure façon d'aligner au centre des éléments absolument positionnés que la façon dont j'ai décrit ci-dessus.

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

La bonne façon est d'utiliser la CCS3 transformpropriété. Bien qu'il ne soit pas pris en charge dans certains anciens navigateurs . Et nous n'avons même pas besoin de définir une valeur fixe ou relative width.

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

Comparaison de travail de jsfiddle ici .

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

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

Cela gardera toujours votre fixe divcentré sur l'écran, même avec un design réactif.

Vous pouvez également utiliser flexbox pour cela.

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* this is what centers your element in the fixed wrapper*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* aligns on vertical for column */
  align-items: center; /* aligns on horizontal for column */
  
  /* just for styling to see the limits */
  border: 2px dashed red;
  box-sizing: border-box;
}

.element {
  width: 200px;
  height: 80px;

  /* Just for styling */
  background-color: lightyellow;
  border: 2px dashed purple;
}

<div class="wrapper"> <!-- Fixed element that spans the viewport -->
  <div class="element">Your element</div> <!-- your actual centered element -->
</div>

D'après le post ci-dessus, je pense que le meilleur moyen est

1. Avoir un div fixe avec width: 100%
2. Dans le div, créez un nouveau div statique avec margin-left: autoet margin-right: auto, ou pour table make it align="center".
3. Tadaaaah, vous avez centré votre div fixe maintenant

J'espère que cela aidera.

Les div normaux devraient utiliser margin-left: autoet margin-right: auto, mais cela ne fonctionne pas pour les div fixes. La façon de contourner cela est similaire à la réponse d' Andrew , mais n'utilise pas la <center>chose obsolète . En gros, donnez simplement un wrapper à la div fixe.

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

<div id="wrapper">
    <div id="fixed_div"></div>
</div

Cela centrera un div fixe dans un div tout en permettant au div de réagir avec le navigateur. ie Le div sera centré s'il y a assez d'espace, mais entrera en collision avec le bord du navigateur s'il n'y en a pas; similaire à la réaction d'un div centré régulier.

Si vous souhaitez centrer l'alignement d'une position fixe div à la fois verticalement et horizontalement, utilisez cette

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

<div class="container-div">
  <div class="center-div">

  </div>
</div>

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}

Cela devrait faire la même chose.

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

 left: calc(50% - 200px);

Cela fonctionne si vous souhaitez que l'élément s'étende sur la page comme une autre barre de navigation.

width: calc (width: 100% - width tout ce qui est décentré)

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

largeur: calc (100% - 200px);

C'est assez facile en utilisant 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

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

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

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

Une solution utilisant la boîte flexible; entièrement réactif:

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

si vous ne souhaitez pas utiliser la méthode wrapper. alors vous pouvez faire ceci:

.fixed_center_div {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 50% of width */
  margin-top: -100px; /* 50% of height */
}