centro alineando un div de posición fija

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.

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í .

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.

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>

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.

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.

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%);

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

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

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

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

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.

Una solución usando flex box; totalmente receptivo:

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

child_div {
    /* whatever you want */
}

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