Абсолютная позиция css не будет работать с margin-left: auto margin-right: auto

Ответ 1

EDIT: этот ответ утверждал, что невозможно центрировать абсолютно позиционированный элемент с margin: auto;, но это просто неверно. Поскольку это самый одобренный и принятый ответ, я предположил, что просто изменил бы его, чтобы быть правильным.

Когда вы применяете следующий CSS к элементу

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

И затем дайте элементу фиксированную ширину и высоту, например 200px или 40%, элемент будет центром.

Здесь скрипт, демонстрирующий эффект.

Ответ 2

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

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

В принципе, вы используете left: 50%, затем возвращаете половину ширины с отрицательным отрывом.

Ответ 3

если абсолютный элемент имеет ширину, вы можете использовать код ниже

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

Ответ 4

Рабочая JSFiddle ниже. При использовании абсолютного положения, margin: 0 auto не будет работать, но вы можете сделать это так (также масштабируется):

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

Обновление: работает JSFiddle

Ответ 5

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

Готово! Теперь будет работать маржа слева и справа от поля AUTO для вашего .divtagABS.

Ответ 6

Первый правильный ответ : chipcullen:

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

Другие ответы в основном касались ответа типа "hack". Использование этого всегда будет приносить больше риска, чем официальное решение (основанное на спецификации W3C CSS). Взлом выглядит так:

Второй правильный ответ - несколько человек. Но обратите внимание на разницу между значениями "auto" и "-50px". Здесь вы, вероятно, должны основывать свой выбор. Но этот ответ выглядит следующим образом:

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

Чтобы понять , что это хак это решение, рассмотрим эту выдержку из свойства left из спецификации W3C:

Для абсолютно позиционированных элементов

Это свойство определяет расстояние между краем левого края элемента и левым краем его содержащего блока.

Для относительно позиционированных элементов

Это свойство указывает, что смещение относится к левым краям самого окна.

Итак, происходит то, что элемент с абсолютным позиционированием будет рисоваться (включая поля) слева 0px/top 0px. Элемент имеет фиксированную ширину, поэтому использование auto для свойств поля будет выбирать всю доступную ширину и превращать ее в пробел. Сделайте это с обеих сторон, и элемент будет центрирован, разделив всю доступную ширину между двумя противоположностями (влево/вправо, сверху/снизу).

Лично мне нравится первый лучше, но это личное, я думаю.

Ответ 7

Все ответы были просто предложенными решениями или обходными путями. Но до сих пор не получили ответа на вопрос: почему margin: auto работает с позицией: относительной, но не с позицией: абсолютной.

Следующее объяснение было полезно для меня:

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

Ответ 8

Если элемент является позицией абсолютно, то он не является относительным или ссылкой на какой-либо объект, включая саму страницу. Поэтому margin: auto; не может решить, где находится середина.

Ожидается, что он будет указан явно, используя left и top, где можно разместить себя.

Вы все равно можете центрировать его программно, используя javascript или somesuch.

Ответ 9

Когда вы определяете стили для деления, которые расположены absolute ly, они определяют поля являются бесполезными. Потому что они больше не находятся внутри обычного дерева DOM.

Вы можете использовать float для выполнения трюка.

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