Centrer verticalement et horizontalement un contenu dans une div (ou tout autre bloc), de manière responsive, est devenue une opération très simple, en css pur, grâce à la fonction translate de la propriété CSS3 transform .
Petit rappel : la propriété transform permet d’opérer des manipulations d’éléments sur les axes x, y (pour transform2D) grâce à différentes fonctions. Translate opère une translation sur les 2 axes avec la syntaxe suivante:
[css]
#element{
transform: translate(x, y);
}
[/css]
En utilisant cette fonction et en lui assignant des valeurs relatives en pourcents il est donc possible de centrer facilement un élément dans un élément parent, de manière “responsive” comme ceci :
[css]
#element{
position:relative;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
[/css]
Très simple et efficace, et surtout très utile pour un contenu multiplateforme, sans avoir recours au javascript.