Mitte ausrichten einer festen Position div

Ich versuche, ein Div zu erhalten, dessen position:fixedMitte auf meiner Seite ausgerichtet ist.

Ich war immer in der Lage, dies mit absolut positionierten Divs mit diesem "Hack" zu tun.

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

... wobei der Wert für margin-left die halbe Breite des div beträgt.

Dies scheint nicht für Divs mit fester Position zu funktionieren, sondern platziert sie nur mit der Ecke ganz links bei 50% und ignoriert die Deklaration am linken Rand.

Irgendwelche Ideen, wie dies behoben werden kann, damit ich fest positionierte Elemente zentrieren kann?

Und ich werde einen Bonus-M & M einwerfen, wenn Sie mir sagen können, wie Sie absolut positionierte Elemente besser zentrieren können als oben beschrieben.

Koens Antwort zentriert das Element nicht genau.

Der richtige Weg ist, CCS3 transformEigentum zu verwenden . Obwohl es in einigen alten Browsern nicht unterstützt wird . Und wir müssen nicht einmal einen festen oder relativen Wert festlegen width.

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

Arbeitender jsfiddle Vergleich hier .

Für diejenigen, die das gleiche Problem haben, aber ein ansprechendes Design haben, können Sie auch Folgendes verwenden:

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

Auf diese Weise bleibt Ihr Fix immer divauf dem Bildschirm zentriert, auch bei einem ansprechenden Design.

Sie können auch dafür die Flexbox verwenden.

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

Aus dem obigen Beitrag denke ich, dass der beste Weg ist

1. Habe ein festes div mit width: 100%
2. Erstellen Sie innerhalb des div ein neues statisches div mit margin-left: autound margin-right: auto, oder machen Sie es für den Tisch align="center".
3. Tadaaaah, du hast jetzt dein festes Div zentriert

Hoffe das wird helfen.

Normale Divs sollten margin-left: autound verwenden margin-right: auto, aber das funktioniert nicht für feste Divs. Der Weg dahin ähnelt Andrews Antwort , verwendet aber nicht das veraltete <center>Ding. Geben Sie dem festen Div einfach einen Wrapper.

#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

Dadurch wird ein festes Div innerhalb eines Div zentriert, während das Div mit dem Browser reagieren kann. Das Div wird zentriert, wenn genügend Speicherplatz vorhanden ist, kollidiert jedoch mit dem Rand des Browsers, wenn dies nicht der Fall ist. Ähnlich wie ein regulär zentriertes Div reagiert.

Wenn Sie die Ausrichtung einer festen Position zentrieren möchten, verwenden Sie diese Option sowohl vertikal als auch horizontal

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

Wenn Sie wissen, dass die Breite 400px beträgt, ist dies wahrscheinlich der einfachste Weg, dies zu tun.

 left: calc(50% - 200px);

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

Dies sollte das gleiche tun.

Dies funktioniert, wenn sich das Element wie eine andere Navigationsleiste über die Seite erstrecken soll.

width: calc (width: 100% - width was auch immer sonst nicht zentriert ist)

Zum Beispiel, wenn Ihre seitliche Navigationsleiste 200px ist:

Breite: berechnet (100% - 200 Pixel);

Mit der Breite ist es ganz einfach: 70%; links: 15%;

Legt die Elementbreite auf 70% des Fensters fest und lässt auf beiden Seiten 15%

Ich habe Folgendes mit Twitter Bootstrap (v3) verwendet

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

Das heißt, Sie erstellen ein Element mit voller Breite und fester Position und schieben einfach einen Container hinein. Der Container wird relativ zur vollen Breite zentriert. Sollte sich auch gut verhalten.

Eine Lösung mit Flexbox; voll ansprechbar:

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

child_div {
    /* whatever you want */
}

Wenn Sie die Wrapper-Methode nicht verwenden möchten. dann können Sie dies tun:

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