Blog Alsacréations

Nous n'allons pas ici débattre ni expliquer comment fonctionnent ces deux techniques, elles sont expliquées sur de nombreux sites CSS, et notamment ici-même sur Alsa. Par contre, nous allons les rappeler rapidement...

Technique des marges automatiques

Cette technique positionne les éléments dimensionnés grâce à la valeur "auto" sur les marges latérales. L'élément reste dans le flux HTML.

Si cet élément contient d'autres éléments, il faut que ce contenu reste lui aussi dans le flux, sinon il s'affichera hors de l'élément centré. En clair, cela empêche l'objet centré de contenir des éléments positionnés en absolu par exemple.

Technique des marges négatives

Cette autre méthode est basée sur une astuce qui permet de centrer des éléments positionnés en absolu.

L'astuce est de placer dans un premier temps ce bloc à top 50% et left 50%, ce qui placera le coin supérieur gauche du bloc au milieu de page.

Ensuite, il faut lui donner des marges négatives dont la valeur est exactement la moitié de la largeur et hauteur du bloc, ce qui le positionnera au milieu de page.

Cette technique a l'avantage de centrer l'élément tout en permettant au contenu d'être positionné également. Cependant, elle est plus lourde, moins intuitive et nécessite de sortir la calculette !

Deux en un

Il existe pourtant une méthode alternative qui permet d'avoir les avantages des deux techniques.

Appliquons donc des marges latérales automatiques à notre élément conteneur (méthode 1). Effectivement, à ce stade là, l'élément ne peut pas contenir d'éléments positionnés.

La seule solution serait que le conteneur lui-même soit positionné. Or en lui donnant une position absolute, les marges automatiques n'ont plus aucun effet.

Heureusement, il existe d'autres moyens de positionner un élément, la position relative par exemple.

Donnez tout simplement une position relative à votre conteneur global et vous verrez qu'il restera centré avec ses marges automatique tout en acceptant un contenu positionné !

Vous retrouverez ces techniques sur le tutoriel de centrage CSS d'Alsa.