Як централізувати абсолютний поділ горизонтально за допомогою CSS?

Я є дівом і хочу, щоб його було по центру горизонтально - хоча я даю йому 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.

Це визначає, як далеко відсунути краї краю з боку вікна.

Як і вгорі, але вказує, наскільки зміщений правий край поля у вікні [лівий / правий] краю [правий / лівий] край поля, що містить блок.

Джерело: 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? Можна використовувати флексбокс.

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

настільки просто, використовуйте лише поля поля та праворуч:

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

Докладніше ви можете побачити в цій пораді => Як встановити елемент div на центр у html-блозі Obinb

Ось посилання, будь ласка, використовуйте це, щоб зробити діву в центрі, якщо позиція абсолютна.

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

}