Centrer dynamiquement un élément dans un conteneur à l’aide de CSS

Quand il s’agit d’écrire sur le développement, je ne parle pas souvent de choses autres que PHP et JavaScript, principalement parce que je travaille avec ces langages plus que d’autres.

Je veux dire, oui, le CSS fait partie de l’accord, tout comme le HTML, mais c’est ce qu’on attend de nos jours, n’est-ce pas ?

Donc, s’il y avait un petit conseil à donner à propos de CSS, c’est bien celui-ci (bien que je devrais peut-être en écrire plus ?). C’est difficile quand Chris fait un travail aussi génial en exécutant CSS Tricks, mais je m’éloigne du sujet.

Quoi qu’il en soit, voici le problème et la solution.

Centrer dynamiquement un élément dans un conteneur

L’idée de centrer dynamiquement un élément est basée sur le scénario suivant :

• Vous appelez une API qui répondra avec un ensemble, par exemple, d’images une fois l’appel terminé.
• Vous devez centrer chaque image dans son conteneur.
• Les images n’auront pas de hauteur fixe et devront être positionnées et centrées dynamiquement dans les conteneurs de l’interface utilisateur.

C’est peut-être encore un peu général. Si c’est le cas, supposons que vous ayez une liste (ordonnée ou non, peu importe). Ils ont une hauteur et une largeur fixes, et vous allez placer les images, mises à l’échelle, dans chaque élément.

N’oubliez pas : vous ne pouvez pas placer des éléments tels que des éléments div dans des éléments li (car un  élément div est un élément de niveau bloc) sans le modifier via du CSS. Et nous voulons éviter de le faire.

Donc, en fin de compte, l’interface utilisateur peut ressembler à ceci (brut, je sais):

Si vous souhaitez que chaque image soit placée dans l’élément de liste, que vous souhaitiez qu’elle ait une certaine hauteur d’échelle et que vous souhaitiez qu’elle soit centrée, essayez le code suivant :

.acme-element {
  position:   relative;
  top:        50%;
  transform:  translateY(-50%);
  height:     auto;
  max-height: 190px;
}

La clé de cela, vraiment, est le style de transformation. Selon MDN :

La fonction CSS translateY() repositionne un élément verticalement sur le plan 2D. Son résultat est un type de données.

Avoir du sens ?

Pensez-y de cette façon : la fonction translateY prendra un élément donné (identifié par son sélecteur) et le positionnera en utilisant la valeur spécifiée.

Il s’agit de transformations

Vous pouvez utiliser des pixels, des pourcentages ou tout ce dont vous avez besoin pour y arriver. Dans ce cas, ce sont des pourcentages (et ils sont négatifs). Bien que j’utilise un exemple de mon implémentation, il s’agit également d’un conseil sur la façon d’utiliser la fonction transformY en relation avec les transformations.

Si la compatibilité du navigateur est importante – ce qui, dans certains cas, devrait être le cas – consultez ce tableau. Vous êtes plutôt bien couvert.