centre alignant une position fixe div


127

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.


Travaille pour moi. Dans tous sauf IE6 (évidemment).
bobince

@Kyle si vous pouviez choisir une réponse, cela aiderait les autres utilisateurs à identifier la solution à votre problème.
andreihondrari

Réponses:


202

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 .


1
c'est parfait. Je l'ai utilisé pour une application cordova et il devrait fonctionner dans les principaux navigateurs mis à jour :)
saurabh

2
Très simple mais totalement utile. Je vous remercie.
Gilberto Sánchez

Ouah merci! J'ai essayé de centrer le texte entre deux divs inégaux et c'est le seul qui fonctionne sans détruire le balisage!
Andrey Kaipov

4
La vraie réponse +1
sn3ll

3
@Alex left: 50%déplace le div vers les 50% de la page. Mais vous devez garder à l'esprit qu'il le déplace en partant du côté gauche du div, donc le div n'est pas encore centré. translate(-50%, 0)qui translateX(-50%)considère essentiellement la largeur actuelle du div et le déplace de -50% de sa largeur vers le côté gauche de l'endroit réel.
emil.c

168

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.


2
Cela m'a aidé avec un projet RWD :)
tctc91

6
d'où viennent ces 37,5%?
aurora

7
@aurora - c'est -1/2 du réglage de position (donc -(75/2)dans ce cas)
Inaimathi

1
Pourquoi n'est-ce pas la réponse acceptée est un mystère, cela fonctionne juste (tm)
CGK

2
Cropis a une meilleure solution
Arnaldo Capo

44

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>


12
pourquoi se donner la peine de mentionner center et align = "center"? text-align: center is the way
wlf

1
Vous devez inclure le style d'alignement du texte dans votre exemple.
Manatax

Merci beaucoup! Cela m'a vraiment aidé!
Joan.bdm

J'ai modifié ma réponse en supprimant la mention à <center>laquelle était obsolète et en utilisant une technique moderne comme le display: flexet certaines propriétés associées.
andreihondrari

33

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.


2
+1 très utile si vous devez également centrer un div avec une largeur fixe. Par exemple 990px.
dcernahoschi

C'est aussi le seul moyen que je connaisse pour autoriser max-widths pour les éléments à position fixe. Vous voulez une barre latérale fixe qui occupe de manière réactive 30% de votre max-width: 1200pxpage Web? Cela vous y mènera.
Michael

7

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.


4

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

4
<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.


3

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

2

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


1

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


1

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.


0

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 */
}

-1

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 */
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.