Mitte ausrichten einer festen Position div

126

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.

Kyle
quelle
Funktioniert bei mir. In allen außer IE6 (offensichtlich).
Bobince
@Kyle Wenn Sie eine Antwort auswählen könnten, würde dies anderen Benutzern helfen, die Lösung für Ihr Problem zu finden.
andreihondrari

Antworten:

199

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 .

Emzero
quelle
1
das ist perfekt. Ich habe dies für eine Cordova-Anwendung verwendet und es wird erwartet, dass sie in den wichtigsten aktualisierten Browsern ausgeführt wird :)
saurabh
2
Sehr einfach, aber absolut nützlich. Danke dir.
Gilberto Sánchez
Wow, danke! Ich habe versucht, Text zwischen zwei ungleichmäßigen Divs zu zentrieren, und dies ist die einzige, die funktioniert, ohne das Markup zu zerstören!
Andrey Kaipov
4
Die wahre Antwort +1
sn3ll
3
@Alex left: 50%verschiebt das Div auf die 50% der Seite. Aber Sie müssen bedenken, dass es es von der linken Seite des Div aus bewegt, daher ist das Div noch nicht zentriert. translate(-50%, 0)Dies translateX(-50%)berücksichtigt im Wesentlichen die aktuelle Breite des Div und verschiebt es um -50% seiner Breite vom tatsächlichen Ort nach links.
Emil.c
168

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.

Koen
quelle
2
Dies half mir bei einem RWD-Projekt :)
tctc91
6
Woher kommen diese 37,5%?
Aurora
7
@aurora - es ist -1/2 der Positionseinstellung (also -(75/2)in diesem Fall)
Inaimathi
1
Warum ist das nicht die akzeptierte Antwort ist ein Rätsel, es funktioniert einfach (tm)
CGK
2
Cropis hat eine bessere Lösung
Arnaldo Capo
44

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>

andreihondrari
quelle
12
Warum sollte man sich die Mühe machen, center and align = "center" zu erwähnen?
Textausrichtung
1
Sie sollten den Textausrichtungsstil in Ihr Beispiel aufnehmen.
Manatax
Ich danke dir sehr! Das hat mir wirklich geholfen!
Joan.bdm
Ich habe meine Antwort geändert, indem ich <center>die veraltete Erwähnung entfernt und eine moderne Technik wie die display: flexund einige damit verbundene Eigenschaften verwendet habe.
andreihondrari
33

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.

Bhimbim
quelle
2
+1 sehr nützlich, wenn Sie auch ein Div mit fester Breite zentrieren müssen. ZB 990px.
dcernahoschi
Dies ist auch die einzige mir bekannte Möglichkeit, max-widths für Elemente mit fester Position zuzulassen . Sie möchten eine feste Seitenleiste, die 30% Ihrer max-width: 1200pxWebseite beansprucht? Dies wird Sie dorthin bringen.
Michael - Wo ist Clay Shirky
7

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.

Kevin
quelle
4

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%);
LAXIT KUMAR
quelle
3

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

 left: calc(50% - 200px);
Daut
quelle
3
<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.

JCBrown
quelle
2

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

Robert Ross
quelle
1

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%

Maria
quelle
1

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.

Barry Carlyon
quelle
0

Eine Lösung mit Flexbox; voll ansprechbar:

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

child_div {
    /* whatever you want */
}
MarsAndBack
quelle
-1

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