Định tâm ngang CSS của một div cố định?

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

Tôi biết câu hỏi này là một triệu lần ngoài kia, tuy nhiên tôi không thể tìm ra giải pháp cho trường hợp của mình. Tôi đã có một div, cần được sửa trên màn hình, ngay cả khi trang được cuộn, nó vẫn luôn luôn ở giữa màn hình!

Div nên có 500pxchiều rộng, nên 30pxcách xa đỉnh (lề trên), nên được đặt ở giữa theo chiều ngang ở giữa trang cho tất cả các kích thước trình duyệt và không nên di chuyển khi cuộn phần còn lại của trang.

Điều đó có thể không?

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

Các câu trả lời ở đây đã lỗi thời. Bây giờ bạn có thể dễ dàng sử dụng một biến đổi CSS3 mà không cần mã hóa lề . Điều này hoạt động trên tất cả các yếu tố, bao gồm các yếu tố không có chiều rộng hoặc chiều rộng động.

Trung tâm ngang:

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

Trung tâm dọc:

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

Cả ngang và dọc:

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

Khả năng tương thích không phải là vấn đề: http://caniuse.com/#feat=transforms2d

Nếu sử dụng khối nội tuyến là một tùy chọn, tôi sẽ khuyên bạn nên sử dụng phương pháp này:

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

Tôi đã viết một bài viết ngắn về điều này ở đây: http://salomvary.github.com/poseition-fixed-horizontally-centered.html

Chỉnh sửa tháng 9 năm 2016: Mặc dù thật tuyệt khi vẫn nhận được một phiếu bầu thỉnh thoảng cho điều này, bởi vì thế giới đã chuyển sang, bây giờ tôi đi với câu trả lời sử dụng biến đổi (và có rất nhiều sự ủng hộ). Tôi sẽ không làm theo cách này nữa.

Một cách khác để không phải tính toán ký quỹ hoặc cần một thùng chứa phụ:

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

Có thể trung tâm khủng khiếp div theo cách này:

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

Sử dụng theo cách này, bạn sẽ luôn đặt khối bên trong của mình làm trung tâm, ngoài ra, nó có thể dễ dàng chuyển thành phản hồi thực (trong ví dụ này sẽ chỉ là chất lỏng trên màn hình nhỏ hơn), do đó không có giới hạn như trong ví dụ câu hỏi và trong câu trả lời được chọn .

... hoặc bạn có thể gói bạn div menu khác:

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

Đây là một giải pháp hai div. Đã cố gắng để giữ cho nó súc tích và không bị mã hóa cứng. Đầu tiên, html mong đợi:

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

Nguyên tắc đằng sau css sau là định vị một số phía của "bên ngoài", sau đó sử dụng thực tế là nó giả định kích thước của "bên trong" để thay đổi tương đối phía sau.

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

Cách tiếp cận này tương tự như Quentin, nhưng bên trong có thể có kích thước thay đổi.

Đây là một giải pháp flexbox khi sử dụng div trình bao bọc toàn màn hình. trung tâm nội dung biện minh đó là div con theo chiều ngang và căn chỉnh các mục trung tâm theo chiều dọc.

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