css абсолютна позиція не працюватиме з margin-left: auto margin-right: auto

Скажімо, у вас є такий css, застосований до тегу div

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

поля зліва та поля зліва не набувають чинності

але якщо у вас є родич, це чудово працює, тобто

,divtagREL {
position: relative;
margin-left: auto;  
 margin-right:auto;
}

чому так? я просто хочу відцентрувати елемент

хтось може пояснити, чому встановлення полів на авто в абсолютному положенні не працює?

EDIT: ця відповідь стверджувала, що неможливо відцентрувати абсолютно позиціонований елемент за допомогою margin: auto;, але це просто не відповідає дійсності. Оскільки це найбільш прийнята і прийнята відповідь, я здогадався, що просто зміню її на правильну.

Коли ви застосовуєте наступний CSS до елемента

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

А потім надайте елементу фіксовану ширину та висоту, наприклад 200px або 40%, елемент буде центрувати себе.

Ось скрипка, яка демонструє ефект.

Я використав цей фокус, щоб відцентрувати абсолютно позиціонований елемент . Хоча, ви повинні знати ширину елемента.

.divtagABS {
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
  }

В основному, ви використовуєте лівий: 50%, а потім поверніть його на половину ширини з негативним полем.

якщо абсолютний елемент має ширину, ви можете використовувати код нижче

.divtagABS{
    width:300px;
    positon:absolute;
    left:0;
    right:0;
    margin:0 auto;
}

Працює JSFiddle нижче. При використанні абсолютної позиції margin: 0 autoце не спрацює, але ви можете зробити наступне (також масштабуватиметься):

left: 50%;
transform: translateX(-50%);

Оновлення: Працює JSFiddle

У мене вже була така сама проблема, і у мене є рішення написати контейнер (.divtagABS-контейнер, у вашому випадку) абсолютно позиціонований, а потім відносно позиціонувати вміст усередині нього (.divtagABS, у вашому випадку).

Готово! Тепер AUTO для поля .divtagABS зліва та зліва буде працювати.

Усі відповіді були лише запропонованими рішеннями чи обхідними шляхами. Але все одно не отримаєте відповіді на питання: чому margin: auto працює з position: relative, а ні з position: absolute.

Наступне пояснення було для мене корисним:

"Поля мають мало сенсу для абсолютно розташованих елементів, оскільки такі елементи вилучаються із звичайного потоку, тому вони не можуть відтіснити будь-які інші елементи на сторінці . Використання таких полів може вплинути лише на розміщення елемента, до якого застосовується поле, не будь-який інший елемент ". http://www.justskins.com/forums/css-margins-and-absolute-82168.html

Якщо елемент абсолютно позиційний, то він не відносний або не стосується будь-якого об’єкта - включаючи саму сторінку. Тож margin: auto;не можу вирішити, де середина.

Це чекає, коли йому явно скажуть, використовуючи leftі topде розташувати себе.

Ви все ще можете відцентрувати його програмно, використовуючи javascript або щось інше.

Коли ви визначаєте стилі для поділу, який позиціонується absolute ly, вони вказують поля марні. Оскільки їх більше немає всередині звичайного дерева DOM.

Ви можете використовувати float, щоб зробити трюк.

.divtagABS {
    float: left;
    margin-left: auto;  
    margin-right:auto;
 }