Sabit bir div CSS yatay merkezleme?

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

Bu sorunun orada milyonlarca kez olduğunu biliyorum, ancak davam için bir çözüm bulamıyorum. Ekranda sabitlenmesi gereken bir div var, sayfa kaydırılsa bile her zaman ekranın ortasında ORTA kalmalıdır!

Div, 500pxgenişliğe sahip olmalı 30px, üstten (kenar boşluğu üstte) uzakta olmalı, tüm tarayıcı boyutları için sayfanın ortasında yatay olarak ortalanmış olmalı ve sayfanın geri kalanını kaydırırken hareket etmemelidir.

Mümkün mü?

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

Buradaki cevaplar güncel değil. Artık bir kenar boşluğunu kodlamadan kolayca bir CSS3 dönüşümü kullanabilirsiniz . Bu, genişliği veya dinamik genişliği olmayan öğeler de dahil olmak üzere tüm öğeler üzerinde çalışır.

Yatay merkez:

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

Dikey merkez:

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

Hem yatay hem de dikey:

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

Uyumluluk sorun değil: http://caniuse.com/#feat=transforms2d

Satır içi blokları kullanmak bir seçenekse bu yaklaşımı tavsiye ederim:

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

Burada kısa bir yazı yazdım: http://salomvary.github.com/position-fixed-horizontally-centered.html

Edit September 2016: Buna rağmen ara sıra yukarı oy almak güzel olsa da, dünya ilerlediğinden, şimdi dönüşüm kullanan (ve bir ton upvotes olan) cevaba giderdim. Artık bu şekilde yapmam.

Bir marj hesaplamak veya bir alt konteynere ihtiyaç duymamak için başka bir yol:

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

Div'i yatay olarak bu şekilde ortalamak mümkündür:

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

Bu şekilde kullanarak her zaman iç bloğunuz merkezlenir, ayrıca kolayca gerçek duyarlılığa dönüştürülebilir (örnekte sadece daha küçük ekranlarda akıcı olacaktır), bu nedenle soru örneğinde ve seçilen cevapta herhangi bir sınırlama yoktur .

... ya da başka bir menü div menüsünü kapatabilirsiniz:

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

İşte başka bir iki bölümlü çözüm. Kısa ve özlü tutmaya çalıştım. İlk olarak, beklenen html:

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

Aşağıdaki css'in arkasındaki ilke "dış" ın bir tarafını konumlandırmak, daha sonra ikincisini nispeten kaydırmak için "iç" boyutunu varsaydığı gerçeğini kullanmaktır.

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

Bu yaklaşım Quentin'e benzer, ancak iç değişken büyüklükte olabilir.

İşte tam ekran sarmalayıcı div kullanırken bir flexbox çözümü. justify-content çocuk div bölümünü yatay olarak, hizalama öğeleri ise dikey olarak merkezler.

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