Làm cách nào để căn giữa div tuyệt đối theo chiều ngang bằng CSS?

Tôi là một div và muốn nó được đặt ở giữa theo chiều ngang - mặc dù tôi cho nó margin:0 auto;không phải là trung tâm ...

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

Bạn cần phải thiết lập left: 0và right: 0.

Điều này xác định khoảng cách để bù các cạnh biên từ các cạnh của cửa sổ.

Giống như 'trên cùng', nhưng chỉ định khoảng cách cạnh phải của hộp được bù với [trái / phải] của cạnh [phải / trái] của khối chứa hộp.

Nguồn: http://www.w3.org/TR/CSS2/visuren.html#poseition-props

Lưu ý: Phần tử phải có chiều rộng nhỏ hơn cửa sổ nếu không nó sẽ chiếm toàn bộ chiều rộng của cửa sổ.

Nếu bạn có thể sử dụng truy vấn phương tiện để chỉ định lề tối thiểu , sau đó chuyển sang autokích thước màn hình lớn hơn.

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

Điều này không hoạt động trong IE8 nhưng có thể là một lựa chọn để xem xét. Nó chủ yếu hữu ích nếu bạn không muốn chỉ định chiều rộng.

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

Mặc dù câu trả lời trên là chính xác nhưng để đơn giản cho người mới, tất cả những gì bạn cần làm là đặt lề, trái và phải. đoạn mã sau sẽ làm điều đó với điều kiện là chiều rộng được đặt và vị trí là tuyệt đối:

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

Bản giới thiệu:

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

Hộp linh hoạt? Bạn có thể sử dụng 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;
}

Rất dễ dàng, chỉ sử dụng các thuộc tính lề và trái, phải:

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

Bạn có thể xem thêm trong mẹo này => Cách đặt phần tử div thành trung tâm trong blog html- Obinb

Dưới đây là một liên kết xin vui lòng sử dụng này để làm cho div ở trung tâm nếu vị trí là tuyệt đối.

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

Ví dụ jsfiddle

Bạn không thể sử dụng margin:auto;trên position:absolute;các phần tử, chỉ cần xóa nó nếu bạn không cần nó, tuy nhiên, nếu có, bạn có thể sử dụng left:30%;((100% -40%) / 2) và truy vấn phương tiện cho các giá trị tối đa và tối thiểu:

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

}