web-dev-qa-db-fra.com

CSS centrage horizontal d'un div fixe?

#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

Je sais que cette question est posée un million de fois, mais je ne trouve pas de solution à mon cas. J'ai un div, qui devrait être fixé à l'écran, même si la page est défilée, il doit toujours rester centré au milieu de l'écran!

Le div doit avoir 500px width, doit être 30px éloigné du haut (marge supérieure), doit être centré horizontalement au milieu de la page pour toutes les tailles de navigateur et ne doit pas bouger lors du défilement du reste de la page.

Est-ce possible?

htmlcsscentering
164
matt
left: 50%;
margin-left: -400px; /* Half of the width */
167
Quentin

Les réponses ici sont obsolètes. Maintenant, vous pouvez facilement utiliser une transformation CSS3 sans coder en dur une marge . Cela fonctionne sur tous les éléments, y compris les éléments sans largeur ni largeur dynamique.

Centre horizontal:

left: 50%;
transform: translateX(-50%);

Centre vertical:

top: 50%;
transform: translateY(-50%);

Horizontal et vertical:

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

La compatibilité n’est pas un problème: http://caniuse.com/#feat=transforms2d

448
Maciej Krawczyk

Si l'utilisation de blocs en ligne est une option, je recommanderais cette approche:

.container { 
    /* fixed position a zero-height full width container */
    position: fixed;
    top: 0; /* or whatever position is desired */
    left: 0;
    right: 0;
    height: 0;
    /* center all inline content */
    text-align: center;
}

.container > div {
    /* make the block inline */
    display: inline-block;
    /* reset container's center alignment */
    text-align: left;
}

J'ai écrit un court post à ce sujet ici: http://salomvary.github.com/position-fixed-horizontally-centered.html

57
salomvary

Éditer septembre 2016: Même s'il est bon d'avoir encore un vote positif à ce sujet, car le monde a évolué, je vais maintenant donner la réponse qui utilise transform (et qui a une tonne de votes positifs). Je ne le ferais plus de cette façon.

Une autre façon de ne pas avoir à calculer une marge ou avoir besoin d'un sous-conteneur:

#menu {
    position: fixed;   /* Take it out of the flow of the document */
    left: 0;           /* Left Edge at left for now */
    right: 0;          /* Right Edge at right for now, so full width */ 
    top: 30px;         /* Move it down from top of window */
    width: 500px;      /* Give it the desired width */ 
    margin: auto;      /* Center it */
    max-width: 100%;   /* Make it fit window if under 500px */ 
    z-index: 10000;    /* Whatever needed to force to front (1 might do) */
}
27
Nick Rice

Il est possible de centrer la div de manière horizontale:

html:

<div class="container">
    <div class="inner">content</div>
</div>

css:

.container {
    left: 0;
    right: 0;
    bottom: 0; /* or top: 0, or any needed value */
    position: fixed;
    z-index: 1000; /* or even higher to prevent guarantee overlapping */
}

.inner {
    max-width: 600px; /* just for example */
    margin: 0 auto;
}

En utilisant cette manière, vous aurez toujours votre bloc interne centré, en plus il peut être facilement transformé en vrai responsive (dans l'exemple, il sera simplement fluide sur les écrans plus petits), donc pas de limitation comme dans l'exemple de question et dans la réponse choisie .

5
Denis V

Voici une autre solution à deux div. J'ai essayé de le garder concis et non codé en dur. Tout d'abord, le HTML attendu:

<div id="outer">
  <div id="inner">
    content
  </div>
</div>

Le principe derrière le CSS suivant est de positionner un côté de "extérieur", puis d'utiliser le fait qu'il assume la taille de "intérieur" pour déplacer relativement ce dernier.

#outer {
  position: fixed;
  left: 50%;          // % of window
}
#inner {
  position: relative;
  left: -50%;         // % of outer (which auto-matches inner width)
}

Cette approche est similaire à celle de Quentin, mais interne peut être de taille variable.

5
Anonymous

... ou vous pouvez envelopper votre menu div dans un autre:

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


#wrapper{
         width:800px;
         background: rgba(255, 255, 255, 0.8);
         margin:30px auto;
         border:1px solid red;
    }

    #menu{
        position:fixed;
        border:1px solid green;
        width:300px;
        height:30px;
    }
5
Meduza

Voici une solution flexbox lors de l'utilisation d'un div en wrapper plein écran. justifier-contenu centre son div enfant horizontalement et align-items le centre verticalement.

<div class="full-screen-wrapper">
    <div class="center"> //... content</div>
</div>

.full-screen-wrapper { 
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  align-items: center;
}

.center {
  // your styles
}
0
Vien Tang