CSS centrage horizontal d'un div fixe?

Question

    #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 un million de fois là-bas, cependant je ne peux pas trouver une solution à mon cas. j'ai un div, qui devrait être fixé sur l'écran, même si la page défile il faut toujours rester CENTRÉ au milieu de l'écran!

donc la div doit avoir 500px de largeur, doit être 30px loin du sommet (margin-top), devrait être centrée horizontalement dans le milieu de la page pour que tous les browsersizes et ne doit pas bouger lorsque vous faites défiler le reste de la page.

est-ce possible?

Answer 1

left: 50%;
margin-left: -400px; /* Half of the width */

Answer 2

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

Answer 3

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

Answer 4

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 dans comme dans l'exemple de question et dans la réponse choisie .

Answer 5

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