Mutlak div, CSS kullanarak yatay olarak nasıl ortalanır?

Bir div'ım var ve yatay olarak ortalanmasını istiyorum - her ne kadar vermeme rağmen margin:0 auto;ortalanmış değil ...

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

Sen ayarlamanız gerekir left: 0ve right: 0.

Bu, kenar boşluklarının pencerenin kenarlarından ne kadar uzaklacağını belirtir.

'Üst' gibi, ancak bir kutunun sağ kenar boşluğunun kutunun bulunduğu bloğun [sağ / sol] kenarının [sol / sağ] ile ne kadar uzak olduğunu belirtir.

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

Not: Öğenin pencereden daha küçük bir genişliği olmalıdır, aksi takdirde pencerenin tüm genişliğini kaplar.

Minimum kenar boşluğu belirtmek için medya sorgularını kullanabilir ve daha autobüyük ekran boyutları için bu konuma geçebilirsiniz .

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

Bu IE8'de çalışmaz, ancak dikkate alınması gereken bir seçenek olabilir. Bir genişlik belirtmek istemiyorsanız öncelikle kullanışlıdır.

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

Yukarıdaki cevaplar doğru olmakla birlikte, yeni başlayanlar için basitleştirmek için tek yapmanız gereken sol ve sağ kenar boşluğu ayarlamaktır. genişliğin ayarlanması ve konumun mutlak olması şartıyla aşağıdaki kod yapılır:

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'a? Flexbox kullanabilirsiniz.

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

çok kolay, sadece kenar boşluğu ve sol, sağ özellikleri kullanın:

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

Bu ipucunda daha fazlasını görebilirsiniz => html- Obinb blogunda div öğesini merkeze ayarlama

İşte bir bağlantı konum mutlak ise div div yapmak için kullanın.

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

Örnek jsfiddle

Elemanlar margin:auto;üzerinde kullanamazsınız position:absolute;, sadece ihtiyacınız yoksa kaldırın, ancak eğer yaparsanız left:30%;, maks. Ve min değerleri için ((% 100 -% 40) / 2) ve medya sorgularını kullanabilirsiniz:

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

}