La position absolue de CSS ne fonctionne pas avec margin-left:auto margin-right : auto

Question

Supposons que le CSS suivant soit appliqué à une balise div.

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

le site margin-left y margin-right ne prend pas effet

mais si vous avez du relatif, cela fonctionne bien c'est-à-dire

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

Pourquoi ça ? Je veux juste centrer un élément.

Quelqu'un peut-il expliquer pourquoi le réglage des marges sur auto en position absolue ne fonctionne pas ?

Answer 1

EDIT : cette réponse prétendait qu'il n'est pas possible de centrer un élément positionné de manière absolue avec margin: auto; mais ce n'est tout simplement pas vrai. Comme c'est la réponse la plus votée et la plus acceptée, je me suis dit que j'allais la modifier pour qu'elle soit correcte.

Lorsque vous appliquez le CSS suivant à un élément

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

Ensuite, donnez à l'élément une largeur et une hauteur fixes, comme 200px ou 40%, l'élément sera le centre lui-même.

Voici un violon qui démontre l'effet.

Answer 2

J'ai a utilisé cette astuce pour centrer un élément positionné de manière absolue . Cependant, vous devez connaître le nom de l'élément. width .

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

En gros, vous utilisez left: 50% puis la faire reculer de la moitié de son width avec un négatif margin .

Answer 3

Si l'élément absolu a une largeur, vous pouvez utiliser le code ci-dessous

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

Answer 4

J'ai déjà eu ce même problème et j'ai trouvé la solution en écrivant un conteneur (.divtagABS-container, dans votre cas) positionné de manière absolue et en positionnant ensuite de manière relative le contenu à l'intérieur (.divtagABS, dans votre cas).

C'est fait ! Les paramètres margin-left et margin-right AUTO de votre .divtagABS fonctionnent désormais.

Answer 5

Si l'élément est positionné de manière absolue, alors il n'est pas relatif, ou en référence à un objet quelconque - y compris la page elle-même. Ainsi, margin: auto; ne peut pas décider où est le milieu.

Il attend d'être dit explicitement, en utilisant left y top où se positionner.

Vous pouvez toujours le centrer par programme, en utilisant javascript ou autre.