Como centralizar div absoluta horizontalmente usando CSS?

Eu tenho uma div e quero que ela seja centralizada horizontalmente - embora eu esteja dando a ela margin:0 auto;que não é centralizada ...

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

Você precisa definir left: 0e right: 0.

Isso especifica até que ponto as bordas da margem serão deslocadas dos lados da janela.

Como 'top', mas especifica até que ponto a margem direita da caixa é deslocada para a [esquerda / direita] da borda [direita / esquerda] do bloco que contém a caixa.

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

Nota: O elemento deve ter uma largura menor que a janela ou ocupará toda a largura da janela.

Se você pudesse usar consultas de mídia para especificar uma margem mínima e fazer a transição para autotamanhos de tela maiores.

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

Isso não funciona no IE8, mas pode ser uma opção a considerar. É principalmente útil se você não deseja especificar uma largura.

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

Embora as respostas acima estejam corretas, mas para simplificar para iniciantes, tudo o que você precisa fazer é definir margem, esquerda e direita. o código a seguir fará isso, desde que a largura esteja definida e a posição seja absoluta:

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? Você pode usar o 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;
}

tão fácil, use apenas as margens e as propriedades esquerda e direita:

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

Você pode ver mais nesta dica => Como definir o elemento div para centralizar em html- Obinb blog

Aqui está um link, use-o para fazer a div no centro, se a posição for absoluta.

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

Exemplo jsfiddle

Você não pode usar margin:auto;em position:absolute;elementos, basta removê-lo se você não precisa dele, no entanto, se você fizer isso, você poderia usar left:30%;((100% -40%) / 2) e consultas de mídia para os valores máximo e mínimo:

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

}