CSS horizontale Zentrierung eines festen Div?

181
#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

Ich weiß, dass diese Frage millionenfach gestellt wird, aber ich kann keine Lösung für meinen Fall finden. Ich habe ein Div, das auf dem Bildschirm behoben werden sollte, auch wenn die Seite gescrollt wird, sollte es immer in der Mitte des Bildschirms zentriert bleiben!

Das Div sollte eine 500pxBreite haben, 30pxvon oben entfernt sein (Rand-oben), für alle Browsergrößen horizontal in der Mitte der Seite zentriert sein und sich beim Scrollen über den Rest der Seite nicht bewegen.

Ist das möglich?

matt
quelle

Antworten:

166
left: 50%;
margin-left: -400px; /* Half of the width */
QUentin
quelle
25
Es funktioniert nicht wie beabsichtigt, wenn Sie die Größe des Browserfensters ändern.
3
@ Bahodir: Bist du sicher? Bei der Größenänderung sieht es für mich richtig aus. Ich denke, das -400liegt an der Breite des Div, auf das gesetzt wird 800.
Merlyn Morgan-Graham
1
@PrestonBadeer - Wie der, nach dem die Frage fragt?
Quentin
3
Stimme voll und ganz zu - das ist KEINE Lösung! Codieren Sie niemals etwas auf diese Weise. -1
Nate I
3
Ich habe dies NICHT abgelehnt, weil es eine schlechte Antwort für seinen Tag war - es war eine gute Antwort, aber weil es nicht mehr ist und die nächsthöhere Antwort jede Hilfe braucht, um als die beste Antwort angesehen zu werden JETZT. Quentin: Ich denke, es wäre eine gute Idee, einen entsprechenden Kommentar in der Antwort selbst zu bearbeiten - ich würde dann meine Abwärtsstimme umkehren.
Nick Rice
546

Die Antworten hier sind veraltet. Jetzt können Sie problemlos eine CSS3-Transformation verwenden, ohne einen Rand fest zu codieren . Dies funktioniert für alle Elemente, einschließlich Elemente ohne Breite oder dynamische Breite.

Horizontale Mitte:

left: 50%;
transform: translateX(-50%);

Vertikale Mitte:

top: 50%;
transform: translateY(-50%);

Sowohl horizontal als auch vertikal:

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

Kompatibilität ist kein Problem: http://caniuse.com/#feat=transforms2d

Maciej Krawczyk
quelle
86
+1 Diese Antwort zeigt ein Problem mit dem Stackoverflow: Alte Antworten, die gut für ihren Tag waren und zu Recht akzeptiert wurden, können stolz darauf sitzen und den Eindruck erwecken, dass sie immer noch angemessen sind, während großartige Antworten für eine neuere Welt wie diese erforderlich sind kämpfen sich gegen die Chancen.
Nick Rice
10
@ NickRice 100% einverstanden. Diese Antwort sollte die neu akzeptierte Antwort sein. Junior Entwickler sollten nicht einmal sehen die aktuelle akzeptierte Antwort!
Nate I
2
@matt bitte akzeptiere diesen stattdessen. Scrollen Sie viel zu lange, um dies zu sehen.
ssbb
4
Dies führt zu Unschärfeeffekten im Boxschatten in Inhaltselementen.
Rab
4
Ja, Chrome verwischt den transformierten Inhalt falsch. Text ist auch unscharf. Dies ist jedoch die einzige Lösung, bei der ein festes Element ohne Hardcodierung und Verwendung von Wrapper-Elementen zentriert wird. Wenn Sie sich nicht für Zeigerereignisse im Hintergrund interessieren, können Sie denselben Effekt mit einem Vollbild-Wrapper und einer Flexbox oder der folgenden Lösung von @ salomvary erzielen.
Maciej Krawczyk
58

Wenn die Verwendung von Inline-Blöcken eine Option ist, würde ich diesen Ansatz empfehlen:

.container { 
    /* fixed position a zero-height full width container */
    position: fixed;
    top: 0; /* or whatever position is desired */
    left: 0;
    right: 0;
    height: 0;
    /* center all inline content */
    text-align: center;
}

.container > div {
    /* make the block inline */
    display: inline-block;
    /* reset container's center alignment */
    text-align: left;
} 

Ich habe hier einen kurzen Beitrag dazu geschrieben: http://salomvary.github.com/position-fixed-horizontally-centered.html

Speichel
quelle
1
10x, das hat großartig funktioniert, ohne dass ich irgendwelche Zahlen für widthoder so hart codieren musste - im Gegensatz zu @Quentins Antwort
Yatharth Agarwal
30

Bearbeiten September 2016: Obwohl es schön ist, gelegentlich eine Gegenstimme dafür zu erhalten, weil sich die Welt weiterentwickelt hat, würde ich jetzt mit der Antwort fortfahren, die Transformation verwendet (und die eine Menge Gegenstimmen hat). Ich würde es nicht mehr so ​​machen.

Eine andere Möglichkeit, keine Marge berechnen zu müssen oder einen Untercontainer zu benötigen:

#menu {
    position: fixed;   /* Take it out of the flow of the document */
    left: 0;           /* Left edge at left for now */
    right: 0;          /* Right edge at right for now, so full width */ 
    top: 30px;         /* Move it down from top of window */
    width: 500px;      /* Give it the desired width */ 
    margin: auto;      /* Center it */
    max-width: 100%;   /* Make it fit window if under 500px */ 
    z-index: 10000;    /* Whatever needed to force to front (1 might do) */
}
Nick Rice
quelle
@Joey Was macht der Boden: 0? dh warum wird es benötigt? (Es ist einige Zeit her, seit ich mir das angeschaut habe!)
Nick Rice
bottom:0würde sicherstellen, dass das Menü immer vertikal zentriert ist, aber ich sehe jetzt, dass das OP nicht darum gebeten hat. :)
Jordan H
Ich habe versucht, dies in einem anderen Kontext zu verwenden, indem ich herausgefunden habe, dass es nicht in FF zentriert ist, wenn die Elementhöhe höher als die Fensterhöhe (Ansichtsfenster) ist
Philipp Werminghausen
Weil sich die Welt weiterentwickelt hat, würde ich jetzt mit der Antwort fortfahren, die Transformation verwendet. (Ich habe diesen Kommentar zuvor unter Bezugnahme auf den Namen gemacht, den der Antwortende verwendet hat - aber sie haben diesen Namen geändert, sodass mein Kommentar keinen Sinn mehr ergab und ich ihn gelöscht habe. Suchen Sie stattdessen auf dieser Seite nach Transformation.)
Nick Rice
6

Es ist möglich, das Div horizontal zu zentrieren:

html:

<div class="container">
    <div class="inner">content</div>
</div>

CSS:

.container {
    left: 0;
    right: 0;
    bottom: 0; /* or top: 0, or any needed value */
    position: fixed;
    z-index: 1000; /* or even higher to prevent guarantee overlapping */
}

.inner {
    max-width: 600px; /* just for example */
    margin: 0 auto;
}

Auf diese Weise haben Sie Ihren inneren Block immer zentriert, außerdem kann er leicht auf echte Reaktionsfähigkeit umgestellt werden (im Beispiel ist er auf kleineren Bildschirmen nur flüssig), daher keine Einschränkung in Bezug auf das Fragenbeispiel und die gewählte Antwort .

Denis V.
quelle
5

... oder Sie können Ihr Menü div in ein anderes einwickeln:

    <div id="wrapper">
       <div id="menu">
       </div>
    </div>


#wrapper{
         width:800px;
         background: rgba(255, 255, 255, 0.8);
         margin:30px auto;
         border:1px solid red;
    }

    #menu{
        position:fixed;
        border:1px solid green;
        width:300px;
        height:30px;
    }
Meduza
quelle
5

Hier ist eine weitere Zwei-Div-Lösung. Versucht, es kurz und nicht fest codiert zu halten. Erstens das zu erwartende HTML:

<div id="outer">
  <div id="inner">
    content
  </div>
</div>

Das Prinzip hinter dem folgenden CSS besteht darin, eine Seite von "außen" zu positionieren und dann die Tatsache zu verwenden, dass es die Größe von "innen" annimmt, um letztere relativ zu verschieben.

#outer {
  position: fixed;
  left: 50%;          // % of window
}
#inner {
  position: relative;
  left: -50%;         // % of outer (which auto-matches inner width)
}

Dieser Ansatz ähnelt dem von Quentin, kann jedoch von innerer Größe sein.

Anonym
quelle
-1

Hier ist eine Flexbox-Lösung bei Verwendung eines Vollbild-Wrapper-Div. Das Ausrichten von Inhalten zentriert das untergeordnete Div horizontal und das Ausrichten von Elementen zentriert es vertikal.

<div class="full-screen-wrapper">
    <div class="center"> //... content</div>
</div>

.full-screen-wrapper { 
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  align-items: center;
}

.center {
  // your styles
}
Vien Tang
quelle