CSS อยู่ตรงกลางแนวนอนของ div คงที่?

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

ฉันรู้ว่าคำถามนี้เป็นล้านครั้ง แต่ฉันไม่สามารถหาวิธีแก้ปัญหากรณีของฉันได้ ฉันมี div ซึ่งควรแก้ไขบนหน้าจอแม้ว่าหน้าจะถูกเลื่อนมันควรอยู่กึ่งกลางหน้าจอเสมอ!

div ควรมี500pxความกว้างควรอยู่30pxห่างจากด้านบน (margin-top) ควรอยู่กึ่งกลางในแนวนอนตรงกลางของหน้าทุกขนาดเบราว์เซอร์และไม่ควรเลื่อนเมื่อเลื่อนหน้าส่วนที่เหลือ

เป็นไปได้ไหม

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

คำตอบที่นี่ล้าสมัยแล้ว ตอนนี้คุณสามารถใช้ CSS3 แปลงโดยไม่ต้อง hardcoding ขอบ สิ่งนี้ใช้ได้กับทุกองค์ประกอบรวมถึงองค์ประกอบที่ไม่มีความกว้างหรือความกว้างแบบไดนามิก

ศูนย์แนวนอน:

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

ศูนย์แนวตั้ง:

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

ทั้งแนวนอนและแนวตั้ง:

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

ความเข้ากันได้ไม่ใช่ปัญหา: http://caniuse.com/#feat=transforms2d

หากใช้ inline-blocks เป็นตัวเลือกฉันขอแนะนำวิธีนี้:

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

ฉันเขียนบทความสั้น ๆ เกี่ยวกับเรื่องนี้ที่นี่: http://salomvary.github.com/position-fixed-horizontally-centered.html

แก้ไขกันยายน 2559: แม้ว่าจะเป็นเรื่องดีที่ยังคงได้รับการโหวตเป็นครั้งคราวเพราะโลกได้ก้าวไปข้างหน้าตอนนี้ฉันจะไปกับคำตอบที่ใช้การแปลง (และที่มี upvotes มากมาย) ฉันจะไม่ทำแบบนี้อีกต่อไป

อีกวิธีที่ไม่ต้องคำนวณระยะขอบหรือต้องการ sub-container:

#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 ไว้อย่างน่ากลัว:

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

การใช้วิธีนี้คุณจะมีบล็อกภายในของคุณอยู่ตรงกลางเสมอนอกจากนี้มันสามารถเปลี่ยนเป็นการตอบสนองที่แท้จริงได้ง่าย (ในตัวอย่างมันจะลื่นไหลบนหน้าจอขนาดเล็ก) ดังนั้นจึงไม่มีข้อ จำกัด ในตัวอย่างคำถามและคำตอบที่เลือก .

... หรือคุณสามารถตัด div เมนูในที่อื่น:

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

นี่เป็นอีกวิธีแก้ปัญหาสองส่วน พยายามทำให้รัดกุมและไม่ฮาร์โค้ด ก่อนอื่น html ที่คาดหวัง:

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

หลักการที่อยู่เบื้องหลัง css ต่อไปนี้คือการวางตำแหน่งด้านนอกของ "outer" บางส่วนจากนั้นใช้ความจริงที่ว่าขนาดของ "inner" จะเปลี่ยนขนาดค่อนข้างหลัง

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

วิธีนี้คล้ายกับเควนติน แต่ภายในสามารถมีขนาดผันแปรได้

นี่คือโซลูชัน flexbox เมื่อใช้ div wrapper แบบเต็มหน้าจอ justify-content centre มันเป็นลูก div ในแนวนอนและ align-items จัดกึ่งกลางมันในแนวตั้ง

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