CSS horizontale Zentrierung eines festen Div?

#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?

left: 50%;
margin-left: -400px; /* Half of the width */

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

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

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

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 .

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

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.

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
}