CSS centrado horizontal de un div fijo?

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

Sé que esta pregunta está ahí un millón de veces, sin embargo, no puedo encontrar una solución para mi caso. Tengo un div, que debe corregirse en la pantalla, incluso si la página se desplaza, ¡siempre debe permanecer CENTRADA en el centro de la pantalla!

El div debe tener 500pxancho, debe estar 30pxalejado de la parte superior (margen superior), debe estar centrado horizontalmente en el medio de la página para todos los tamaños de navegador y no debe moverse al desplazarse por el resto de la página.

¿Es eso posible?

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

Las respuestas aquí están desactualizadas. Ahora puede usar fácilmente una transformación CSS3 sin codificar un margen . Esto funciona en todos los elementos, incluidos los elementos sin ancho o ancho dinámico.

Centro horizontal:

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

Centro vertical:

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

Tanto horizontal como vertical:

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

La compatibilidad no es un problema: http://caniuse.com/#feat=transforms2d

Si usar bloques en línea es una opción, recomendaría este enfoque:

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

Escribí una breve publicación sobre esto aquí: http://salomvary.github.com/position-fixed-horizontally-centered.html

Editar septiembre de 2016: aunque es bueno obtener un voto positivo ocasional por esto, porque el mundo ha avanzado, ahora iría con la respuesta que usa transform (y que tiene un montón de votos a favor). Ya no lo haría así.

Otra forma de no tener que calcular un margen o necesitar un subcontenedor:

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

Es posible centrar horizontalmente el div de esta manera:

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

De esta manera, siempre tendrá su bloque interno centrado, además, puede convertirse fácilmente en una verdadera respuesta (en el ejemplo, solo será fluido en pantallas más pequeñas), por lo tanto, no hay limitación en el ejemplo de la pregunta y en la respuesta elegida .

... o puedes envolver tu menú div en otro:

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

Aquí hay otra solución de dos div. Intenté mantenerlo conciso y no codificado. Primero, el html esperado:

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

El principio detrás del siguiente css es posicionar algún lado de "externo", luego usar el hecho de que asume el tamaño de "interno" para cambiar relativamente el último.

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

Este enfoque es similar al de Quentin, pero el interior puede ser de tamaño variable.

Aquí hay una solución de flexbox cuando se usa un contenedor de pantalla completa div. justify-content centra su div hijo horizontalmente y align-items lo centra verticalmente.

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