абсолютное позиционирование в CSS не будет работать с маржи-левой:авто маржи-право: авто

скажем, у вас есть следующий css применяется к тегу div

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

в левое поле и правое поле не вступило в силу

но если у вас есть родственник, он работает нормально то есть

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

почему это? я просто хочу центрировать элемент

может кто-нибудь объяснить, почему установка полей на авто в абсолютном положении не работает?

7 63
html css css3 html5 cursor-position

7 ответов:

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

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

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

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

здесь Скрипка это демонстрирует эффект.

103

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

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

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

64

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

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

работает JSFiddle ниже. При использовании абсолютной позиции,margin: 0 auto не будет работать, но можно сделать вот так (так):

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

обновление: работающего JSFiddle

13

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

готово! В левое поле и правое поле для вашего авто .теперь будут работать дивтагабс.

1

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

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

вы все еще можете центрировать его программно, используя javascript или что-то подобное.

-1

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

можно использовать поплавок, чтобы сделать трюк.

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