Bagaimana cara memusatkan div absolut secara horizontal menggunakan CSS?

Saya memiliki div dan ingin itu dipusatkan secara horizontal - meskipun saya berikan itu margin:0 auto;tidak terpusat ...

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

Anda perlu mengatur left: 0dan right: 0.

Ini menentukan seberapa jauh untuk mengimbangi tepi margin dari sisi jendela.

Seperti 'atas', tetapi menentukan seberapa jauh tepi margin kanan kotak diimbangi ke [kiri / kanan] tepi [kanan / kiri] dari blok yang berisi kotak.

Sumber: http://www.w3.org/TR/CSS2/visuren.html#position-props

Catatan: Elemen harus memiliki lebar lebih kecil dari jendela atau elemen lainnya akan mengambil seluruh lebar jendela.

Jika Anda bisa menggunakan kueri media untuk menentukan margin minimum , dan kemudian beralih ke autountuk ukuran layar yang lebih besar.

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

Ini tidak berfungsi di IE8 tetapi mungkin menjadi pilihan untuk dipertimbangkan. Ini terutama berguna jika Anda tidak ingin menentukan lebar.

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

Meskipun jawaban di atas benar tetapi untuk mempermudah para pemula, yang perlu Anda lakukan adalah menetapkan margin, kiri dan kanan. kode berikut akan melakukannya asalkan lebar diatur dan posisi absolut:

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

Demo:

.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? Anda dapat menggunakan 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;
}

begitu mudah, hanya gunakan margin dan properti kiri, kanan:

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

Anda dapat melihat lebih banyak di tip ini => Cara mengatur elemen div ke pusat di html- Obinb blog

Berikut ini tautan, silakan gunakan ini untuk membuat div di tengah jika posisinya absolut.

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

Contoh jsfiddle

Anda tidak dapat menggunakan margin:auto;pada position:absolute;elemen, hanya menghapusnya jika Anda tidak membutuhkannya, namun, jika Anda melakukannya, Anda bisa menggunakan left:30%;((100% -40%) / 2) dan kueri media untuk max dan min nilai-nilai:

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

}