web-dev-qa-db-fra.com

la position absolue css ne fonctionnera pas avec margin-left: auto margin-right: auto

Supposons que les css suivants soient appliqués à une balise div

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

les marges gauche et droite ne prennent pas effet

mais si vous avez un parent, cela fonctionne très bien c'est-à-dire.

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

pourquoi donc? je veux juste centrer un élément

quelqu'un peut-il expliquer pourquoi la définition de marges sur auto en position absolue ne fonctionne pas?

htmlcsshtml5css3position
68
user1118019

EDIT: cette réponse affirmait qu'il n'était pas possible de centrer un élément en position absolue avec margin: auto;, mais ce n'est tout simplement pas vrai. Comme il s’agit de la réponse la plus votée et la plus acceptée, j’imaginais que je devais la modifier pour qu'elle soit correcte.

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

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

Et puis donnez à l'élément une largeur et une hauteur fixes, telles que 200px ou 40%, l'élément se centrera .

Voici n violon qui démontre l'effet.

128
Kevin Bowersox

J'ai tilisé cette astuce pour centrer un élément absolument positionné . Cependant, vous devez connaître la largeur de l'élément.

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

En gros, vous utilisez left: 50%, puis reculez la moitié de sa largeur avec une marge négative.

65
chipcullen

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

Utilisation de JSFiddle ci-dessous. Lorsque vous utilisez la position absolue, margin: 0 auto ne fonctionnera pas, mais vous pouvez faire comme ceci (sera également mise à l’échelle):

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

Mise à jour: Travailler JSFiddle

14
Baked Inhalf

J'avais déjà le même problème et la solution consiste à écrire un conteneur (.divtagABS-container, dans votre cas) parfaitement positionné, puis un positionnement relatif du contenu à l'intérieur (.divtagABS, dans votre cas).

Terminé! Les marges gauche-gauche et droite-AUTO pour votre .divtagABS vont maintenant fonctionner.

1
Rafael Camargo

Toutes les réponses n'étaient que des suggestions de solutions ou de solutions de contournement. Mais on n’obtient toujours pas de réponse à la question: pourquoi margin: auto fonctionne avec position: relative mais pas avec position: absolute.

Les explications suivantes ont été utiles pour moi:

"Les marges ont peu de sens sur les éléments positionnés de manière absolue, car ces éléments sont retirés du flux normal. Ainsi, ils ne peuvent pas repousser les autres éléments de la page . De telles marges ne peuvent affecter que le placement de l'élément auquel elle est appliquée, pas n'importe quel autre élément. " http://www.justskins.com/forums/css-margins-and-absolute-82168.html

0
Alex Vovchuk