Come centrare il div assoluto in orizzontale usando i CSS?

Ho un div e voglio che sia centrato orizzontalmente - anche se lo sto dando non margin:0 auto;è centrato ...

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

È necessario impostare left: 0e right: 0.

Questo specifica quanto lontano compensare i bordi del margine dai lati della finestra.

Come 'top', ma specifica quanto lontano il bordo del margine destro di una scatola è spostato rispetto al [sinistro / destro] del bordo [destro / sinistro] del blocco contenente la scatola.

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

Nota: l'elemento deve avere una larghezza inferiore alla finestra, altrimenti occuperà l'intera larghezza della finestra.

Se è possibile utilizzare le query multimediali per specificare un margine minimo , quindi passare a autodimensioni dello schermo più grandi.

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

Questo non funziona in IE8 ma potrebbe essere un'opzione da considerare. È utile soprattutto se non si desidera specificare una larghezza.

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

Sebbene le risposte di cui sopra siano corrette ma per renderlo semplice per i principianti, tutto ciò che devi fare è impostare il margine, sinistro e destro. il seguente codice lo farà a condizione che sia impostata la larghezza e che la posizione sia assoluta:

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? Puoi usare 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;
}

così facile, usa solo le proprietà margin e left, right:

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

Puoi vedere di più in questo suggerimento => Come impostare l'elemento div al centro nel blog html- Obinb

Ecco un link per favore usa questo per rendere il div al centro se la posizione è assoluta.

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

Esempio jsfiddle

Non puoi utilizzarlo margin:auto;sugli position:absolute;elementi, rimuovilo se non ti serve, tuttavia, se lo fai, potresti usare left:30%;((100% -40%) / 2) e query multimediali per i valori massimo e minimo:

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

}