วิธีการจัดกึ่งกลาง div ในแนวนอนโดยใช้ CSS?

ฉันเป็น div และต้องการให้มันอยู่กึ่งกลางแนวนอน - แม้ว่าฉันจะให้มันmargin:0 auto;มันไม่ได้อยู่กึ่งกลาง ...

.container {
    position: absolute;
    top: 15px;
    z-index: 2;
    width:40%;
    max-width: 960px;
    min-width: 600px;
    height: 60px;
    overflow: hidden;
    background: #fff; 
    margin:0 auto;
}

คุณจะต้องตั้งและleft: 0right: 0

สิ่งนี้ระบุว่าจะชดเชยระยะขอบจากขอบหน้าต่าง

เช่นเดียวกับ 'ด้านบน' แต่ระบุระยะขอบขวาสุดของกล่องที่จะชดเชยกับ [ซ้าย / ขวา] ของ [ขวา / ซ้าย] ของขอบที่มีบล็อกของกล่อง

ที่มา: http://www.w3.org/TR/CSS2/visuren.html#position-props

หมายเหตุ:องค์ประกอบจะต้องมีความกว้างน้อยกว่าหน้าต่างมิฉะนั้นจะใช้ความกว้างทั้งหมดของหน้าต่าง

หากคุณสามารถใช้คิวรีสื่อเพื่อระบุระยะห่างขั้นต่ำสุดแล้วเปลี่ยนเป็นautoขนาดหน้าจอที่ใหญ่ขึ้น

.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}

<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>

สิ่งนี้ใช้ไม่ได้ใน IE8 แต่อาจเป็นตัวเลือกในการพิจารณา มันมีประโยชน์หลักหากคุณไม่ต้องการระบุความกว้าง

.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

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

margin: 0 auto;
left: 0;
right: 0;

การสาธิต:

.centeredBox {
    margin: 0 auto;
    left: 0;
    right: 0;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
   
   }

<div class="centeredBox">Centered Box</div>

flexbox? คุณสามารถใช้ flexbox

.box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-justify-content: center;
  justify-content: center;

}

.box div {
  border:1px solid grey;
  flex: 0 1 auto;
  align-self: auto;
  background: grey;
}

<div class="box">
  <div class="A">I'm horizontally centered.</div>
</div>

.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}

ง่ายมากเพียงใช้ระยะขอบและซ้ายคุณสมบัติที่ถูกต้อง:

.elements {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0;
}

คุณสามารถดูเพิ่มเติมในเคล็ดลับนี้ => วิธีตั้งองค์ประกอบ div ให้อยู่กึ่งกลางในบล็อก html- Obinb

นี่คือลิงค์โปรดใช้สิ่งนี้เพื่อให้ div อยู่ตรงกลางหากตำแหน่งนั้นสมบูรณ์

HTML:

<div class="bar"></div>

CSS:

.bar{
  width:200px;
  border-top:4px solid red;
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  left:0;
  right:0;
}

ตัวอย่าง jsfiddle

คุณไม่สามารถใช้margin:auto;กับposition:absolute;องค์ประกอบเพียงลบออกหากคุณไม่ต้องการอย่างไรก็ตามถ้าคุณใช้คุณสามารถใช้left:30%;((100% -40%) / 2) และแบบสอบถามสื่อสำหรับค่าสูงสุดและต่ำสุด:

.container {
    position: absolute;
    top: 15px;
    left: 30%;
    z-index: 2;
    width:40%;
    height: 60px;
    overflow: hidden;
    background: #fff;
}

@media all and (min-width:960px) {

    .container {
        left: 50%;
        margin-left:-480px;
        width: 960px;
    }

}

@media all and (max-width:600px) {

    .container {
        left: 50%;
        margin-left:-300px;
        width: 600px;
    }

}