html - inside - css center image in div

Centrado horizontal CSS 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, 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 30px ancho, debe estar a 30px 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?

Answer 1

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

Answer 2

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 de la siguiente CSS es posicionar un lado de "externo", luego use el hecho de que asume el tamaño de "interno" 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 3

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

Usando esta forma, siempre tendrá su bloque interno centrado, además, se puede convertir fácilmente en verdadero receptivo (en el ejemplo, 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 .

Answer 4

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

Answer 5

Edición de septiembre de 2016: aunque es bueno tener un voto ocasional de vez en cuando, porque el mundo ha cambiado, ahora elegiré la opción de transformar (y que tiene un montón de votos positivos). No lo haría de esta manera más.

Otra forma de no tener que calcular un margen o necesitar un sub-contenedor:

#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

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:

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

Centro vertical:

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

Ambos, horizontal y vertical:

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

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

Answer 7

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