CSS centrado horizontal de un div fijo?


183
#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?


Respuestas:


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

26
no funciona según lo previsto cuando cambia el tamaño de la ventana del navegador.

3
@Bahodir: ¿Estás seguro? Me parece correcto en cambiar el tamaño. Creo que esto -400se debe al ancho del div configurado en 800.
Merlyn Morgan-Graham

1
@PrestonBadeer - ¿Como el que está haciendo la pregunta?
Quentin

3
Completamente de acuerdo, ¡esto NO es una solución! Nunca codifique algo de esta manera. -1
Nate I

3
He rechazado esto NO porque fue una mala respuesta para su día, fue una buena respuesta, sino porque ya no lo es, y la siguiente respuesta más alta necesita toda la ayuda que pueda ser vista como la mejor respuesta AHORA. Quentin: Creo que sería una buena idea editar un comentario a tal efecto en la respuesta en sí; luego, revertiría mi voto negativo.
Nick Rice

547

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


87
+1 Esta respuesta demuestra un problema con stackoverflow: las respuestas antiguas que fueron buenas para su día y fueron aceptadas correctamente pueden sentarse con orgullo dando la impresión de que aún son apropiadas, mientras que las excelentes respuestas para un mundo más nuevo, como este, tienen que luchando contra las probabilidades.
Nick Rice

11
@NickRice 100% de acuerdo. Esta respuesta debería ser la nueva respuesta aceptada. ¡Los desarrolladores junior ni siquiera deberían ver la respuesta aceptada actual!
Nate I

2
@matt por favor acepte este en su lugar. Desplácese demasiado para ver esto.
ssbb 01 de

44
Esto hace que los efectos de desenfoque en la sombra de la caja en los elementos de contenido.
rab

44
Sí, Chrome difumina incorrectamente el contenido que se transforma. El texto también está borroso. Pero esta es la única solución para tener un elemento fijo centrado sin codificación rígida y utilizando elementos envolventes. Si no le interesan los eventos de puntero del fondo, puede lograr el mismo efecto con un contenedor de pantalla completa y flexbox, o la solución de @ salomvary a continuación.
Maciej Krawczyk

58

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


1
10 veces, esto funcionó muy bien para mí sin tener que codificar ningún número widtho algo así, a diferencia de la respuesta de @Quentins
Yatharth Agarwal

30

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

@Joey ¿Qué hace el fondo: 0? es decir, ¿por qué se necesita? (¡Ha pasado un tiempo desde que miré esto!)
Nick Rice

bottom:0aseguraría que el menú esté siempre centrado verticalmente, pero ahora veo que eso no es lo que solicitó el OP. :)
Jordan H

Traté de usar esto en un contexto diferente porque descubrí que no se centra en FF si la altura de los elementos es más alta que la altura de la ventana (ventana)
Philipp Werminghausen

Debido a que el mundo ha avanzado, ahora iría con la respuesta que usa transform. (Hice este comentario antes, haciendo referencia al nombre que usaba el respondedor, pero cambiaron ese nombre, por lo que mi comentario ya no tenía sentido y lo eliminé, solo busque en esta página la transformación)
Nick Rice,

7

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 .


5

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

5

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.


-1

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
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.