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.

css3, tips, tricks