web-dev-qa-db-fra.com

centre alignant un div position fixe

J'essaie d'obtenir un div qui a position:fixed center aligné sur ma page.

J'ai toujours été capable de le faire avec des divs en position absolue en utilisant ce "hack"

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

... où la valeur de margin-left est égale à la moitié de la largeur de la div.

Cela ne semble pas fonctionner pour les div à position fixe, mais les place 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?

Et je vais ajouter un bonus de M & M si vous pouvez me dire une meilleure façon de centrer des éléments en alignement absolu que celle décrite ci-dessus.

htmlcenteralignmentcss-position
99
Kyle

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

Ce faisant, votre div fixe sera toujours centrée sur l’écran, même avec un design réactif.

158
Koen

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

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

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

Travailler jsfiddle comparaison ici .

144
emzero

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>

30
andreihondrari

De la poste ci-dessus, je pense que la meilleure façon est 

  1. Avoir un div fixe avec width: 100%
  2. Dans la division, créez une nouvelle division statique avec margin-left: auto et margin-right: auto, ou pour la table, rendez-la align="center".
  3. Tadaaaah, vous avez centré votre div fixe maintenant

J'espère que cela aidera.

28
Bhimbim

Les divs normaux devraient utiliser margin-left: auto et margin-right: auto, mais cela ne fonctionne pas pour les divs fixes. La solution est semblable à La réponse d'Andrew , mais n'utilise pas le code obsolète <center>. Fondamentalement, il suffit de donner à la div 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;
}
<div id="wrapper">
    <div id="fixed_div"></div>
</div

Cela permet de centrer une division fixe dans une division tout en permettant à la division de réagir avec le navigateur. c'est-à-dire que la div sera centrée s'il y a assez d'espace, mais entrera en collision avec le bord du navigateur s'il n'y en a pas; semblable à la façon dont une div centrée régulière réagit.

7
Kevin

Si vous savez que la largeur est de 400 pixels, ce serait la meilleure façon de le faire, je suppose.

 left: calc(50% - 200px);
3
Daut

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 quel que soit le décalage de son centrage)

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

largeur: calc (100% - 200px);

2
Robert Ross

Si vous souhaitez centrer en alignant une position fixe div à la fois verticalement et horizontalement utilisez cette

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

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>

Ie faire un élément de largeur complète qui est en position fixe, et il suffit de pousser un conteneur à l'intérieur, le conteneur est centré par rapport à la largeur totale. Devrait se comporter bien en réponse aussi.

1
Barry Carlyon

C'est assez facile d'utiliser largeur: 70%; à gauche: 15%;

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

0
maria

si vous ne voulez 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 */
}
0
Mubashar Abbas

Une solution utilisant flex box; entièrement réactif:

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

child_div {
    /* whatever you want */
}
0
MarsAndBack
<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.

0
JCBrown