trung tâm sắp xếp một vị trí cố định div

Tôi đang cố gắng để có một div có position:fixedtrung tâm được căn chỉnh trên trang của tôi.

Tôi luôn có thể làm điều đó với các div có vị trí tuyệt đối bằng cách sử dụng "hack" này

left: 50%; width: 400px; margin-left:-200px

... Trong đó giá trị cho lề trái là một nửa chiều rộng của div.

Điều này dường như không hoạt động đối với các div vị trí cố định, thay vào đó, nó chỉ đặt chúng với góc ngoài cùng bên trái của chúng ở mức 50% và bỏ qua khai báo bên trái.

Bất kỳ ý tưởng về cách khắc phục điều này để tôi có thể căn giữa các yếu tố định vị cố định?

Và tôi sẽ gửi phần thưởng M & M nếu bạn có thể cho tôi biết một cách tốt hơn để căn giữa các yếu tố được định vị tuyệt đối so với cách tôi đã nêu ở trên.

Câu trả lời của Koen không chính xác tập trung vào yếu tố.

Cách thích hợp là sử dụng CCS3 transformtài sản. Mặc dù nó không được hỗ trợ trong một số trình duyệt cũ . Và chúng ta thậm chí không cần thiết lập một cố định hoặc tương đối width.

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

Làm việc so sánh jsfiddle ở đây .

Đối với những người có cùng vấn đề này, nhưng với thiết kế đáp ứng, bạn cũng có thể sử dụng:

width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;

Làm điều này sẽ luôn giữ cố định của bạn divtập trung vào màn hình, ngay cả với một thiết kế đáp ứng.

Bạn cũng có thể sử dụng flexbox cho việc này.

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* this is what centers your element in the fixed wrapper*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* aligns on vertical for column */
  align-items: center; /* aligns on horizontal for column */
  
  /* just for styling to see the limits */
  border: 2px dashed red;
  box-sizing: border-box;
}

.element {
  width: 200px;
  height: 80px;

  /* Just for styling */
  background-color: lightyellow;
  border: 2px dashed purple;
}

<div class="wrapper"> <!-- Fixed element that spans the viewport -->
  <div class="element">Your element</div> <!-- your actual centered element -->
</div>

Từ bài viết trên, tôi nghĩ cách tốt nhất là

1. Có một div cố định với width: 100%
2. Bên trong div, tạo một div tĩnh mới với margin-left: autovà margin-right: auto, hoặc cho bảng tạo ra nó align="center".
3. Tadaaaah, bạn đã tập trung vào div cố định của bạn bây giờ

Hy vọng điều này sẽ giúp.

Các div bình thường nên sử dụng margin-left: autovà margin-right: auto, nhưng điều đó không hiệu quả với các div cố định. Cách giải quyết tương tự như câu trả lời của Andrew , nhưng không sử dụng <center>điều không được chấp nhận . Về cơ bản, chỉ cần cung cấp cho div cố định một gói.

#wrapper {
    width: 100%;
    position: fixed;
    background: gray;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
}

<div id="wrapper">
    <div id="fixed_div"></div>
</div

Điều này sẽ tập trung vào một div cố định trong một div trong khi cho phép div phản ứng với trình duyệt. tức là div sẽ được căn giữa nếu có đủ dung lượng, nhưng sẽ va chạm với cạnh của trình duyệt nếu không có; tương tự như cách một div trung tâm thông thường phản ứng.

Nếu bạn muốn căn giữa một vị trí cố định div cả theo chiều dọc và chiều ngang, hãy sử dụng cái này

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

Nếu bạn biết chiều rộng là 400px thì đây sẽ là cách dễ nhất để làm điều đó tôi đoán.

 left: calc(50% - 200px);

<div class="container-div">
  <div class="center-div">

  </div>
</div>

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}

Điều này nên làm như vậy.

Điều này hoạt động nếu bạn muốn phần tử trải dài trên trang như một thanh điều hướng khác.

chiều rộng: calc (chiều rộng: 100% - chiều rộng bất cứ điều gì khác nằm ngoài trung tâm của nó)

Ví dụ: nếu thanh điều hướng bên của bạn là 200px:

chiều rộng: calc (100% - 200px);

Nó khá dễ dàng sử dụng chiều rộng: 70%; trái: 15%;

Đặt chiều rộng phần tử thành 70% của cửa sổ và để lại 15% cho cả hai bên

Tôi đã sử dụng như sau với Twitter Bootstrap (v3)

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

Tức là tạo một phần tử chiều rộng đầy đủ ở vị trí cố định và chỉ cần đẩy một container trong đó, container được căn giữa so với chiều rộng đầy đủ. Nên cư xử cũng ok đáp ứng.

Một giải pháp sử dụng hộp flex; đáp ứng đầy đủ:

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

nếu bạn không muốn sử dụng phương thức trình bao bọc. sau đó bạn có thể làm điều này:

.fixed_center_div {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 50% of width */
  margin-top: -100px; /* 50% of height */
}