CSS horizontal centering dari div tetap?

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

Saya tahu pertanyaan ini jutaan kali di luar sana, namun saya tidak dapat menemukan solusi untuk kasus saya. Saya punya div, yang harus diperbaiki di layar, bahkan jika halaman tersebut digulirkan harus selalu BERDIRI di tengah layar!

Div harus memiliki 500pxlebar, harus 30pxjauh dari atas (margin-top), harus dipusatkan secara horizontal di tengah halaman untuk semua ukuran browser dan tidak boleh bergerak ketika menggulir sisa halaman.

Apakah itu mungkin?

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

Jawaban di sini sudah usang. Sekarang Anda dapat dengan mudah menggunakan transformasi CSS3 tanpa hardcoding margin . Ini berfungsi pada semua elemen, termasuk elemen tanpa lebar atau lebar dinamis.

Pusat horisontal:

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

Pusat vertikal:

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

Baik horisontal maupun vertikal:

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

Kompatibilitas bukan masalah: http://caniuse.com/#feat=transforms2d

Jika menggunakan inline-blok adalah opsi, saya akan merekomendasikan pendekatan ini:

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

Saya menulis posting singkat tentang ini di sini: http://salomvary.github.com/position-fixed-horizontally-centered.html

Sunting September 2016: Meskipun menyenangkan untuk mendapatkan pemungutan suara sesekali untuk ini, karena dunia telah berubah, sekarang saya akan menjawab dengan jawaban yang menggunakan transform (dan yang memiliki banyak suara positif). Saya tidak akan melakukannya dengan cara ini lagi.

Cara lain untuk tidak harus menghitung margin atau membutuhkan sub-kontainer:

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

Dimungkinkan untuk memusatkan div dengan cara ini:

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

Dengan menggunakan cara ini Anda akan selalu memusatkan blok batin Anda, selain itu dapat dengan mudah diubah menjadi responsif sejati (dalam contoh itu akan hanya cair pada layar yang lebih kecil), oleh karena itu tidak ada batasan seperti pada contoh pertanyaan dan dalam jawaban yang dipilih .

... atau Anda dapat membungkus menu Anda dengan yang lain:

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

Berikut solusi dua-div lainnya. Mencoba untuk membuatnya singkat dan tidak dikodekan. Pertama, html yang diharapkan:

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

Prinsip di balik css berikut ini adalah memposisikan beberapa sisi "luar", kemudian gunakan fakta bahwa ia mengasumsikan ukuran "dalam" untuk secara relatif menggeser yang terakhir.

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

Pendekatan ini mirip dengan Quentin, tetapi bagian dalam bisa dari ukuran variabel.

Inilah solusi flexbox saat menggunakan div pembungkus layar penuh. justify-content centre itu child div secara horizontal dan sejajarkan-pusat item itu secara 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
}