Как центрировать абсолютный div по горизонтали, используя CSS?

У меня есть div и я хочу, чтобы он был центрирован по горизонтали - хотя я даю его, margin:0 auto;он не центрирован

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

Вам нужно установить left: 0и right: 0.

Это указывает, как далеко смещать края полей от сторон окна.

Как и «top», но указывает, насколько далеко правый край поля смещен к [left / right] от края [right / left] края содержащего блока.

Источник: http://www.w3.org/TR/CSS2/visuren.html#position-props

Примечание . Элемент должен иметь ширину меньше окна, иначе он будет занимать всю ширину окна.

Если бы вы могли использовать медиа-запросы, чтобы указать минимальное поле, а затем перейти к autoэкранам большего размера.

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

Это не работает в IE8, но может быть вариантом для рассмотрения. Это в первую очередь полезно, если вы не хотите указывать ширину.

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

Хотя приведенные выше ответы верны, но для простоты новичков все, что вам нужно сделать, это установить поле слева и справа. следующий код сделает это при условии, что ширина установлена и позиция абсолютна:

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

Демо-версия:

.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? Вы можете использовать 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;
}

так просто, используйте только поля margin и left, right:

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

Вы можете увидеть больше в этом совете => Как установить элемент div в центр в html- блоге Obinb

Вот ссылка, пожалуйста, используйте это, чтобы сделать div в центре, если позиция абсолютная.

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

Пример jsfiddle

Вы не можете использовать margin:auto;на position:absolute;элементах, просто удалите его , если вам это не нужно, однако, если вы делаете, вы можете использовать left:30%;((100% -40%) / 2) и медиа - запросы для максимальных и минимальных значений:

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

}