จัดกึ่งกลางบน Div ตำแหน่งแน่นอน

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

div อยู่ด้านบนสุด แต่ฉันไม่สามารถจัดกึ่งกลางด้วย<center>หรือmargin: 0 auto;

ปัญหาของคุณอาจแก้ไขได้หากคุณให้divความกว้างคงที่ดังนี้:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

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

ลองสิ่งนี้:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

สามารถใช้เทคนิคเดียวกันนี้ได้เช่นกันเมื่อคุณอาจต้องการการจัดแนวในแนวตั้งเพียงแค่ปรับคุณสมบัติดังนี้:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

ในการจัดกึ่งกลางทั้งแนวตั้งและแนวนอนให้ทำดังนี้

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

หากจำเป็นต้องให้คุณมีความกว้างสัมพัทธ์ (เป็นเปอร์เซ็นต์) คุณสามารถรวม div ของคุณในตำแหน่งที่แน่นอนได้:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

โปรดจำไว้ว่าในการวางตำแหน่งองค์ประกอบอย่างแน่นอนองค์ประกอบหลักจะต้องอยู่ในตำแหน่งที่ค่อนข้าง

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

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

จากนั้นแก้ไข html ของคุณให้มีลักษณะเช่นนี้

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

หรือคุณสามารถใช้หน่วยสัมพัทธ์เช่น

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

ใช่:

div#thing { text-align:center; }