centro alineando un div de posición fija


126

Estoy tratando de obtener un div que tenga el position:fixedcentro alineado en mi página.

Siempre he podido hacerlo con divs posicionados absolutamente usando este "hack"

left: 50%; width: 400px; margin-left:-200px

... donde el valor para margen izquierdo es la mitad del ancho del div.

Esto no parece funcionar para divisiones de posición fija, sino que las coloca con su esquina más a la izquierda al 50% e ignora la declaración de margen izquierda.

¿Alguna idea de cómo solucionar esto para poder alinear los elementos posicionados fijos?

Y agregaré un M&M adicional si me puede decir una mejor manera de centrar elementos alineados absolutamente en posición que la que he descrito anteriormente.


Funciona para mi. En todos menos en IE6 (obviamente).
bobince

@Kyle si pudiera elegir una respuesta, ayudaría a otros usuarios a identificar la solución para su problema.
andreihondrari

Respuestas:


200

La respuesta de Koen no centra exactamente el elemento.

La forma correcta es usar la CCS3 transformpropiedad. Aunque no es compatible con algunos navegadores antiguos . Y ni siquiera necesitamos establecer un valor fijo o relativo width.

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

Trabajando jsfiddle comparación aquí .


1
Eso es perfecto. Utilicé esto para una aplicación cordova y se espera que se ejecute en los principales navegadores actualizados :)
saurabh

2
Muy simple pero totalmente útil. Gracias.
Gilberto Sánchez

¡Wow gracias! ¡He estado tratando de centrar el texto entre dos divs desiguales y este es el único que funciona sin destruir el marcado!
Andrey Kaipov

44
La verdadera respuesta +1
sn3ll

3
@Alex left: 50%mueve el div al 50% de la página. Pero debes tener en cuenta que lo mueve comenzando desde el lado izquierdo del div, por lo tanto, el div aún no está centrado. translate(-50%, 0)que básicamente translateX(-50%)considera el ancho actual del div y lo mueve un 50% de su ancho al lado izquierdo desde el lugar real.
emil.c

168

Para los que tienen este mismo problema, pero con un diseño receptivo, también pueden usar:

width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;

Hacer esto siempre mantendrá su fijo divcentrado en la pantalla, incluso con un diseño receptivo.


2
Esto me ayudó con un proyecto RWD :)
tctc91

66
¿De dónde provienen estos 37.5%?
aurora

77
@aurora - es -1/2 del ajuste de posición ( -(75/2)en este caso)
Inaimathi

1
¿Por qué no es esto? La respuesta aceptada es un misterio, simplemente funciona (tm)
CGK

2
Cropis tiene una mejor solución
Arnaldo Capo

44

También puedes usar flexbox para esto.

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* this is what centers your element in the fixed wrapper*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* aligns on vertical for column */
  align-items: center; /* aligns on horizontal for column */
  
  /* just for styling to see the limits */
  border: 2px dashed red;
  box-sizing: border-box;
}

.element {
  width: 200px;
  height: 80px;

  /* Just for styling */
  background-color: lightyellow;
  border: 2px dashed purple;
}
<div class="wrapper"> <!-- Fixed element that spans the viewport -->
  <div class="element">Your element</div> <!-- your actual centered element -->
</div>


12
¿Por qué molestarse en mencionar centro y alinear = "centro"? alineación de texto: el centro es el camino
wlf

1
Debe incluir el estilo de alineación de texto en su ejemplo.
Manatax

Muchas gracias! ¡Esto realmente me ayudó!
Joan.bdm

Modifiqué mi respuesta eliminando la mención a la <center>que estaba en desuso y utilizando una técnica moderna como la display: flexy algunas propiedades asociadas.
andreihondrari

33

De la publicación anterior, creo que la mejor manera es

  1. Tener un div fijo con width: 100%
  2. Dentro del div, crea un nuevo div estático con margin-left: autoy margin-right: auto, o para table, hazlo align="center".
  3. Tadaaaah, ahora has centrado tu div fijo

Espero que esto ayude.


2
+1 es muy útil si necesita centrar un div con ancho fijo también. Por ejemplo, 990 px.
dcernahoschi

Esta es también la única forma que conozco para permitir max-widths para elementos de posición fija. ¿Desea una barra lateral fija que responda de manera receptiva al 30% de su max-width: 1200pxpágina web? Esto te llevará allí.
Michael

7

Los div normales deberían usar margin-left: autoy margin-right: auto, pero eso no funciona para divs fijos. La forma de evitar esto es similar a la respuesta de Andrew , pero no usa lo obsoleto <center>. Básicamente, solo dale al div fijo un contenedor.

#wrapper {
    width: 100%;
    position: fixed;
    background: gray;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
}
<div id="wrapper">
    <div id="fixed_div"></div>
</div

Esto centrará un div fijo dentro de un div mientras permite que el div reaccione con el navegador. es decir, el div estará centrado si hay suficiente espacio, pero colisionará con el borde del navegador si no lo hay; similar a cómo reacciona un div centrado regular.


4

Si desea centrar la alineación de una posición fija div, tanto vertical como horizontalmente, use esto

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

4
<div class="container-div">
  <div class="center-div">

  </div>
</div>

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}

Esto debería hacer lo mismo.


3

Si sabes que el ancho es de 400 px, esta sería la forma más fácil de hacerlo, supongo.

 left: calc(50% - 200px);

2

Esto funciona si desea que el elemento se extienda por la página como otra barra de navegación.

ancho: calc (ancho: 100% - ancho todo lo demás está centrado)

Por ejemplo, si su barra de navegación lateral es 200px:

ancho: calc (100% - 200px);


1

Es bastante fácil usar ancho: 70%; izquierda: 15%;

Establece el ancho del elemento en el 70% de la ventana y deja el 15% en ambos lados


1

Usé lo siguiente con Twitter Bootstrap (v3)

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

Es decir, hacer un elemento de ancho completo que sea de posición fija, y simplemente empujar un contenedor en él, el contenedor está centrado en relación con el ancho completo. Debería comportarse bien de manera receptiva también.


0

Una solución usando flex box; totalmente receptivo:

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

-1

si no quieres usar el método wrapper. entonces puedes hacer esto:

.fixed_center_div {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 50% of width */
  margin-top: -100px; /* 50% of height */
}
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.