Centratura orizzontale CSS di un div fisso?

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

So che questa domanda è un milione di volte là fuori, tuttavia non riesco a trovare una soluzione al mio caso. Ho un div, che dovrebbe essere riparato sullo schermo, anche se la pagina viene fatta scorrere dovrebbe rimanere sempre CENTRATA al centro dello schermo!

Il div dovrebbe avere 500pxlarghezza, dovrebbe essere 30pxlontano dalla parte superiore (margine superiore), dovrebbe essere centrato orizzontalmente al centro della pagina per tutte le dimensioni del browser e non dovrebbe spostarsi durante lo scorrimento del resto della pagina.

È possibile?

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

Le risposte qui sono obsolete. Ora puoi facilmente usare una trasformazione CSS3 senza codificare un margine . Funziona su tutti gli elementi, inclusi gli elementi senza larghezza o larghezza dinamica.

Centro orizzontale:

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

Centro verticale:

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

Sia orizzontale che verticale:

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

La compatibilità non è un problema: http://caniuse.com/#feat=transforms2d

Se usare inline-blocks è un'opzione, consiglierei questo approccio:

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

Ho scritto un breve post su questo qui: http://salomvary.github.com/position-fixed-horizontally-centered.html

Modifica settembre 2016: anche se è bello ottenere ancora un voto occasionale per questo, perché il mondo è passato, ora andrei con la risposta che utilizza la trasformazione (e che ha un sacco di voti). Non lo farei più così.

Un altro modo per non dover calcolare un margine o bisogno di un sotto-contenitore:

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

È possibile centrare orizzontalmente il div in questo modo:

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

In questo modo avrai sempre centrato il tuo blocco interno, inoltre può essere facilmente trasformato in vero reattivo (nell'esempio sarà solo fluido su schermi più piccoli), quindi nessuna limitazione come nell'esempio della domanda e nella risposta scelta .

... oppure puoi avvolgere il tuo menu div in un altro:

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

Ecco un'altra soluzione a due div. Ho cercato di mantenerlo conciso e non codificato. Innanzitutto, l'HTML prevedibile:

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

Il principio alla base del css seguente è di posizionare un lato di "esterno", quindi utilizzare il fatto che assume la dimensione di "interno" per spostare relativamente quest'ultimo.

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

Questo approccio è simile a quello di Quentin, ma interno può avere dimensioni variabili.

Ecco una soluzione flexbox quando si utilizza un div wrapper a schermo intero. centri di giustificazione è div div figlio in orizzontale e allinea elementi-centra in verticale.

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