ตรงกลางจัดตำแหน่ง div ตำแหน่งคงที่

ฉันกำลังพยายามหา div ที่position:fixedจัดกึ่งกลางหน้าเพจ

ฉันสามารถทำได้โดยใช้ div ตำแหน่งที่แน่นอนโดยใช้ "แฮ็ก" นี้

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

... โดยที่ค่าขอบซ้ายคือครึ่งหนึ่งของความกว้างของ div

สิ่งนี้ดูเหมือนจะใช้ไม่ได้กับ div ตำแหน่งคงที่ แต่เพียงแค่วางโดยให้มุมซ้ายสุด 50% และละเว้นการประกาศระยะขอบซ้าย

มีแนวคิดในการแก้ไขอย่างไรเพื่อให้ฉันสามารถจัดตำแหน่งองค์ประกอบคงที่ได้

และฉันจะให้โบนัส M&M หากคุณสามารถบอกวิธีที่ดีกว่าในการจัดตำแหน่งองค์ประกอบที่อยู่ตรงกลางได้ดีกว่าวิธีที่ฉันอธิบายไว้ข้างต้น

คำตอบของ Koen ไม่ได้เน้นที่องค์ประกอบอย่างแน่นอน

วิธีที่เหมาะสมคือการใช้CCS3 transformทรัพย์สิน แม้ว่าเบราว์เซอร์รุ่นเก่าบางรุ่นจะไม่รองรับก็ตาม widthและเราไม่จำเป็นต้องแม้กระทั่งการตั้งญาติคงที่หรือ

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

ทำงานเปรียบเทียบ jsfiddle ที่นี่

สำหรับคนที่มีปัญหาเดียวกันนี้ แต่ด้วยการออกแบบที่ตอบสนองคุณยังสามารถใช้:

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

การทำเช่นนี้จะทำให้คุณdivอยู่กึ่งกลางหน้าจอเสมอแม้จะมีการออกแบบที่ตอบสนอง

คุณสามารถใช้ flexbox สำหรับสิ่งนี้ได้เช่นกัน

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

จากโพสต์ด้านบนผมคิดว่าวิธีที่ดีที่สุดคือ

1. มี div คงที่ด้วย width: 100%
2. ภายใน div ที่ทำให้ div คงใหม่ที่มีmargin-left: autoและหรือสำหรับตารางทำให้มันmargin-right: autoalign="center"
3. Tadaaaah คุณได้จัดกึ่งกลาง div คงที่แล้ว

หวังว่านี่จะช่วยได้

Divs ปกติควรใช้margin-left: autoและmargin-right: autoแต่ใช้ไม่ได้กับ div คงที่ วิธีการแก้ปัญหานี้คล้ายกับคำตอบของ Andrewแต่ไม่ใช้<center>สิ่งที่เลิกใช้แล้ว โดยทั่วไปเพียงแค่ให้กระดาษห่อหุ้ม div คงที่

#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

สิ่งนี้จะจัดกึ่งกลาง div คงที่ภายใน div ในขณะที่ปล่อยให้ div ตอบสนองกับเบราว์เซอร์ กล่าวคือ div จะอยู่กึ่งกลางหากมีพื้นที่เพียงพอ แต่จะชนกับขอบของเบราว์เซอร์หากไม่มี คล้ายกับการตอบสนองของ div ที่อยู่กึ่งกลางปกติ

หากคุณต้องการจัดกึ่งกลางของตำแหน่งคงที่ div ทั้งแนวตั้งและแนวนอนให้ใช้สิ่งนี้

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

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

สิ่งนี้ควรทำเช่นเดียวกัน

ถ้าคุณรู้ว่าความกว้างคือ 400px นี่เป็นวิธีที่ง่ายที่สุดที่จะทำได้

 left: calc(50% - 200px);

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

ความกว้าง: คำนวณ (ความกว้าง: 100% - ความกว้างสิ่งอื่นใดที่อยู่ตรงกลาง)

ตัวอย่างเช่นถ้าแถบนำทางด้านข้างของคุณคือ 200px:

ความกว้าง: คำนวณ (100% - 200px);

ใช้ความกว้างค่อนข้างง่าย: 70%; ซ้าย: 15%;

ตั้งค่าความกว้างขององค์ประกอบเป็น 70% ของหน้าต่างและเหลือ 15% ทั้งสองด้าน

ฉันใช้สิ่งต่อไปนี้กับ Twitter Bootstrap (v3)

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

กล่าวคือสร้างองค์ประกอบความกว้างเต็มซึ่งเป็นตำแหน่งคงที่และเพียงแค่ดันคอนเทนเนอร์เข้าไปในนั้นคอนเทนเนอร์จะอยู่ตรงกลางเมื่อเทียบกับความกว้างเต็ม ควรปฏิบัติอย่างมีความรับผิดชอบด้วย

วิธีแก้ปัญหาโดยใช้กล่องดิ้น ตอบสนองอย่างเต็มที่:

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

child_div {
    /* whatever you want */
}

หากคุณไม่ต้องการใช้วิธีการห่อ จากนั้นคุณสามารถทำได้:

.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 */
}