wake-up-neo.com

mittenausrichtung einer festen Position div

Ich versuche ein div zu bekommen, das position:fixed center auf meiner Seite ausgerichtet hat.

Ich war immer in der Lage, absolut positionierte Divs mit diesem "Hack" zu machen.

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

... wobei der Wert für margin links die Hälfte der Breite von div ist.

Dies scheint nicht für fixe Positionsdivs zu funktionieren, sondern platziert sie einfach mit der linken Ecke bei 50% und ignoriert die Rand-Links-Deklaration.

Irgendwelche Ideen, wie ich das beheben kann, damit ich fest positionierte Elemente zentrieren kann?

Und ich werfe einen Bonus M & M ein, wenn Sie mir sagen können, wie man absolut positionierte Elemente besser zentrieren kann als ich es oben beschrieben habe.

htmlcenteralignmentcss-position
99
Kyle

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

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

Dadurch bleibt Ihr fester div auch bei einem responsiven Design auf dem Bildschirm zentriert.

158
Koen

Koens Antwort zentriert das Element nicht genau.

Die richtige Methode ist die Verwendung der CCS3 transform-Eigenschaft. Obwohl es in einigen alten Browsern nicht unterstützt wird . Und wir müssen nicht einmal eine feste oder relative width setzen.

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

Arbeitet jsfiddle Vergleich hier .

144
emzero

Sie können auch 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>

30
andreihondrari

Aus dem obigen Beitrag denke ich, der beste Weg ist 

  1. Habe ein festes div mit width: 100%
  2. Erstellen Sie im div ein neues statisches div mit margin-left: auto und margin-right: auto oder für die Tabelle align="center".
  3. Tadaaaah, du hast dein festes Div jetzt zentriert

Hoffe das wird helfen.

28
Bhimbim

Normale Divs sollten margin-left: auto und margin-right: auto verwenden, aber das funktioniert nicht für feste Divs. Die Vorgehensweise ist ähnlich wie Andrews Antwort , verwendet jedoch nicht den veralteten <center>. Geben Sie dem fixen 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 Platz vorhanden ist, kollidiert jedoch mit dem Browser-Rand, wenn dies nicht der Fall ist. ähnlich wie ein reguläres zentriertes div.

7
Kevin

Wenn Sie wissen, dass die Breite 400 Pixel beträgt, wäre dies wahrscheinlich der einfachste Weg.

 left: calc(50% - 200px);
3
Daut

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

width: calc (width: 100% - width was sonst noch zentriert ist)

Zum Beispiel, wenn Ihre seitliche Navigationsleiste 200px ist:

breite: berechnet (100% - 200px);

2
Robert Ross

Wenn Sie eine feste Position zentrieren möchten, verwenden Sie diese Option, um sie vertikal und horizontal auszurichten

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

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>

Wenn Sie also ein Element mit voller Breite und fester Position herstellen und einfach einen Container hineinschieben, wird der Container relativ zur gesamten Breite zentriert. Sollte sich ansprechend verhalten.

1
Barry Carlyon

Die Verwendung von .__ ist ziemlich einfach. Breite: 70%; links: 15%;

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

0
maria

wenn Sie die Wrapper-Methode nicht verwenden möchten. dann kannst du das machen:

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

Eine Lösung mit Flexbox; voll ansprechend:

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

child_div {
    /* whatever you want */
}
0
MarsAndBack
<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.

0
JCBrown