CSS horizontale centrering van een vaste div?

Ik weet dat deze vraag een miljoen keer bestaat, maar ik kan geen oplossing voor mijn geval vinden.
Ik heb een div die op het scherm moet worden vastgezet, zelfs als de pagina wordt gescrolld, moet deze altijd GECENTREERD in het midden van het scherm blijven!

De div moet een breedte hebben van 500px, moet 30pxvan de bovenkant verwijderd zijn (margin-top), moet horizontaal gecentreerd zijn in het midden van de pagina voor alle browsers formaten en mag niet bewegen wanneer u over de rest van de pagina scrolt.

Is dat mogelijk?

Antwoord 1, autoriteit 100%

De antwoorden hier zijn verouderd.Nu kunt u gemakkelijk een CSS3-transformatie gebruiken zonder een marge hard te coderen. Dit werkt op alle elementen, inclusief elementen zonder breedte of dynamische breedte.

Horizontaal centrum:

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

Verticaal midden:

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

Zowel horizontaal als verticaal:

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

Compatibiliteit is geen probleem: http://caniuse.com/#feat=transforms2d

Antwoord 2, autoriteit 24%

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

Antwoord 3, autoriteit 9%

Als het gebruik van inline-blokken een optie is, zou ik deze aanpak aanbevelen:

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

Ik heb hier een kort bericht over geschreven: http://salomvary.github .com/position-fixed-horizonally-centered.html

Antwoord 4, autoriteit 5%

Bewerk september 2016: Hoewel het leuk is om hier af en toe een up-vote voor te krijgen, omdat de wereld verder is gegaan, zou ik nu kiezen voor het antwoord dat transform gebruikt (en dat een hoop upvotes heeft) ). Ik zou het niet meer op deze manier doen.

Een andere manier om geen marge te hoeven berekenen of een subcontainer nodig te hebben:

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

Antwoord 5

Het is mogelijk om de div op deze manier horizontaal te centreren:

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

Op deze manier heb je altijd je innerlijke blok gecentreerd, bovendien kan het gemakkelijk worden omgezet in echt responsief (in het voorbeeld is het gewoon vloeiend op kleinere schermen), dus geen beperking in zoals in het voorbeeld van de vraag en in het gekozen antwoord.

Antwoord 6

Hier is nog een oplossing met twee div. Geprobeerd om het beknopt en niet hardcoded te houden. Eerst de verwachte html:

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

Het principe achter de volgende CSS is om een ​​kant van “buiten” te plaatsen, en vervolgens het feit te gebruiken dat het de grootte van “binnen” aanneemt om de laatste relatief te verschuiven.

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

Deze benadering is vergelijkbaar met die van Quentin, maar de binnenkant kan van variabele grootte zijn.

Antwoord 7

… of je kunt je menu-div in een andere inpakken:

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

Antwoord 8

Hier is een flexbox-oplossing bij gebruik van een wrapper-div op volledig scherm. rechtvaardigen-inhoud centreert de onderliggende div horizontaal en align-items centreert deze verticaal.

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