CSS centrado horizontal de un div fijo?

Question

#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 es un millón de veces por ahí, sin embargo, no puedo encontrar una solución a mi caso. Tengo un div, que debe fijarse en la pantalla, incluso si la página se desplaza, ¡siempre debe permanecer CENTRADO en el medio de la pantalla!

El div debe tener 500px ancho, debe ser 30px lejos de la parte superior (margin-top), se debe colocar centrado horizontalmente en el centro de la página para todos los tamaños del navegador y no debe moverse cuando se desplaza el resto de la página.

¿Es esto posible?

Answer 1

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

Answer 2

... o se puede envolver div menú 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; 
    } 

Answer 3

Si se utiliza inline-bloques es una opción Yo 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

Answer 4

Es posible centrar horisontalmente 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; 
} 

el uso de esta manera tendrá siempre el bloqueo interno centrado, además de que puede ser fácilmente convertido en verdadero responde (en el ejemplo que se ser solo fluido en pantallas más pequeñas), por lo tanto no hay limitación en como en el ejemplo de pregunta y en la respuesta elegida.

Answer 5

Edición de septiembre de 2016: Aunque es bueno tener un voto por aquí de vez en cuando, porque el mundo ha cambiado, ahora voy con la respuesta que usa transformar (y que tiene una tonelada de votos positivos) . No lo haría de esta manera más.

Otra manera de no tener que calcular un margen o necesita 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) */ 
} 

Answer 6

es otra solución de dos div aquí. Intenté mantenerlo conciso y no codificado. En primer lugar, el html esperable:

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

El principio detrás de la siguiente CSS es para posicionar algún lado de "exterior", a continuación, utilizar el hecho de que asume el tamaño de "interior" para desplazar 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 interno puede ser de tamaño variable.

Answer 7

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

centro horizontal:

centro

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

vertical:

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

tanto horizontal como vertical:

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

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