Snippets : Les solutions pour centrer horizontalement et verticalement en CSS

En CSS, le centrage d'éléments dans la page n'est une mince affaire. Le centrage horizontal passe encore, mais pour le vertical, rien n'est prévu par défaut. Comme très souvent en CSS, il fiaut donc ruser.
Faisons un tour des solutions les plus simples.

Centrage horizontal

Dans la plupart des cas, le centrage horizontal se règle simplement comme ça :

#myElement {
    margin:0 auto;
    width:200px;
}

Seulement, si le positionnement devient absolu, la méthode simple ne fonctionne plus. L'idée est donc de placer l'élément à 50% du bord gauche auquel on retranchera la moitié de la largeur de celui-ci.

#myElement {
    width:200px;
    position:absolute;
    left:50%;
    margin-left:-100px;
}

Centrage vertical

CSS ne prévoit rien pour le centrage vertical. Le margin-left:auto qui fonctionne dans un sens ne fonctionne pas dans l'autre. Oubliez donc le margin-top:auto qui aurait été trop simple. Ici aussi, il faut ruser avec les marges négatives.

#myElement {
    height:100px;;
    position:absolute;
    top:50%;
    margin-top:-50px;
}

Centrage horizontal et vertical

Vous l'aurez compris, les deux méthodes peuvent être assemblées pour un centrage total.

#myElement {
    height:100px; width:200px;; 
    position:absolute;
    top:50%; left:50%;
    margin:-50px -100px;;
}

Défaut de la méthode

Comme trop souvent en CSS, il faut connaitre la largeur et la hauteur de son élément pour pouvoir en ajuster les marges et placements. Aussi si la fenêtre est plus petite que l'élément, celui-ci sort du champs de vision par le haut. La solution idéale n'existe encore pas.