CSS - marginauto; - Comment ça marche

En utilisant marge: auto centrer un bloc horizontalement est une technique bien connue. Mais vous êtes-vous déjà demandé pourquoi ou comment cela fonctionne? Pour répondre à cette question, nous devons d’abord examiner le fonctionnement de margin: auto. Aussi dans le mix, c'est quoi auto peut éventuellement faire dans les marges, si cela fonctionne pour le centrage vertical, et quelques autres problèmes.

Mais d'abord, qu'est-ce que auto effectivement faire?

La définition de auto varie avec éléments, types d'éléments et le contexte. En marge, auto peut signifier l’une des deux choses suivantes: occuper l’espace disponible ou 0 px. Ces deux seront définir différentes dispositions pour un élément.

"auto" Prend l'espace disponible

C'est l'utilisation la plus courante de la marge auto nous rencontrons souvent. En assignant auto aux marges gauche et droite d'un élément, ils occupent également l'espace horizontal disponible dans le conteneur de l'élément - et l'élément est ainsi centré.

Cependant, cela ne fonctionnera que pour les marges horizontales (plus sur le Pourquoi plus tard), et aussi ne fonctionnera pas avec flotté et éléments en ligne et par lui-même, il ne peut pas fonctionner dans absolu et éléments positionnés fixes (nous verrons cependant comment les faire fonctionner).

Faux Float en occupant l'espace disponible

Puisque auto Dans les marges de droite et de gauche, l’espace "disponible" est réparti de manière égale. Que pensez-vous qu'il se passera lorsque la valeur auto est donné à un seul de ceux?

Une marge gauche ou droite avec auto occupera tout l’espace "disponible", donnant l’impression que l’élément a été vidé à droite ou à gauche.

“auto” Calculé à 0px

Comme indiqué précédemment, auto ne fonctionnera pas dans les éléments floated, inline et absolute. Tous ces éléments ont déjà décidé de leurs dispositions, donc il ne sert à rien d'utiliser auto pour les marges et s'attendre à ce qu'il soit centré comme ça.

Cela ira à l'encontre du but initial d'utiliser quelque chose comme flotte. Par conséquent auto aura une valeur de 0px dans ces éléments.

auto De plus, il ne fonctionnera pas sur un élément de bloc typique s'il n'a pas de largeur. Tous les exemples que je vous ai montrés jusqu'ici ont des largeurs.

Une largeur de valeur auto aura 0px les marges. La largeur d'un élément de bloc couvre généralement son conteneur lorsqu'il est auto ou 100% et donc une marge auto sera calculé pour 0px dans ce cas.

Qu'advient-il des marges verticales avec la valeur auto?

auto dans les deux marges supérieure et inférieure est toujours calculé à 0px (sauf pour les éléments absolus). La spécification W3C le dit comme ceci:

“Si “haut de la marge” ou “marge inférieure” est “auto”, leur valeur utilisée est 0 "

Le pourquoi, enfin c'est un mystère. Cela pourrait être dû au flux de page vertical typique, où la taille de la page augmente en hauteur. Donc, centrer un élément verticalement dans son conteneur ne le fera pas apparaître centré, par rapport à la page elle-même, contrairement à ce qui se fait horizontalement (dans la plupart des cas).

Et c'est peut-être pour cette même raison qu'ils ont décidé d'ajouter une exception pour les éléments absolus pouvant être centrés verticalement sur toute la hauteur de la page..

Cela pourrait aussi être dû à l’effet d’effondrement de la marge (un effondrement d’éléments adjacents” marges) qui est une autre exception pour les marges verticales.

Cependant, ce dernier cas semble être un cas improbable - puisque des éléments qui ne s'affaissent pas - tels que Floats, et des éléments avec débordement autre que visible, toujours attribuer des marges verticales 0px pour auto.

Centrer les éléments absolument positionnés

Comme il se trouve qu’il existe une exception pour les éléments en position absolue, nous”ll utilisera auto valeur de centrer verticalement et horizontalement. Mais avant cela, nous devons savoir quand marge: auto fonctionne réellement comme nous le voulons dans un élément absolument positionné.

C'est ici qu'une autre spécification du W3C entre en scène:

"Si les trois “la gauche”, “largeur”, et “droite” sont “auto”: Premier set any “auto” valeurs pour “marge gauche” et “marge droite” à 0… "

"Si aucun des trois n'est “auto”: Si les deux “marge gauche” et “marge droite” sont “auto”, résoudre l'équation sous la contrainte supplémentaire que les deux marges obtiennent des valeurs égales "

Cela dit à peu près cela pour horizontal auto les marges de saisir des espaces égaux, le valeurs pour la gauche, largeur et droite ne devrait pas être auto , leur valeur par défaut. Il suffit donc de leur donner de la valeur dans un élément absolument positionné. la gauche et droite avoir dû valeurs égales pour un centrage parfait.

La spécification mentionne également quelque chose de similaire pour les marges verticales.

“Si les trois “Haut”, “la taille”, et “bas” sont auto, réglé “Haut” à la position statique… ”

“Si aucun des trois n'est “auto”: Si les deux “haut de la marge” et “marge inférieure” sont “auto”, résoudre l'équation sous la contrainte supplémentaire que les deux marges obtiennent des valeurs égales… ”

Par conséquent, pour qu'un élément absolu soit centré verticalement, ses Haut, la taille, et bas les valeurs ne devraient pas être auto.

Maintenant, en combinant tout cela, c’est ce que nous”vous obtiendrez:

Conclusion

Si vous souhaitez jamais vider un élément de votre page vers la droite ou la gauche sans que les éléments suivants l'enveloppent (comme ce qui se passe avec float), souvenez-vous qu'il est possible d'utiliser auto pour les marges.

Convertir un élément en absolu pour qu'il puisse être centré verticalement n'est peut-être pas une bonne idée. Il existe d'autres options telles que flexbox et transformation CSS qui conviennent mieux à ceux.