Comment puis-je centrer verticalement une image dans un conteneur à l'aide de CSS ?

Centrage vertical d'une image dans un conteneur

Un défi courant dans le développement front-end consiste à centrer verticalement une image dans un conteneur plus grand. Lorsque vous utilisez text-align: center, le centrage horizontal est obtenu facilement, mais l'alignement vertical reste insaisissable.

Solution utilisant le positionnement absolu

Une solution fiable implique de tirer parti du positionnement absolu en conjonction avec des marges automatiques. Le positionnement absolu nous permet de contrôler finement la position de l'image en fonction de son élément parent. La définition de marges automatiques (à l'aide de margin : auto) centre efficacement l'image à la fois horizontalement et verticalement.

Exemple de code

Le code CSS suivant illustre cette approche :

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

De ce fait, l'image sera positionnée exactement au centre de son conteneur parent, quelle que soit la hauteur ou la largeur du conteneur. Cette solution est compatible avec les anciens navigateurs (IE >= 8) et résout efficacement le problème d'alignement vertical.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!