Comment centrer une image horizontalement dans un div quand elle peut être plus grande ou plus petite? - html, css

J'ai un div d'une largeur fixe (ou plutôt d'un pourcentage de largeur fixe) et je veux inclure une image centrée à l'intérieur.

L'image est d'une hauteur fixe, mais parfois elle sera plus étroite que la div et d'autres fois plus large. Dans le cas d'images plus larges, je les recadre en utilisant overflow:hidden.

Dans les deux cas, je veux que l'image soit centrée horizontalement. Mon problème est que je peux le faire pour chaque cas, mais je n’ai pas pu trouver de solution qui s’applique aux deux.

Pour l'image plus petite que la div, je peux utiliser margin:0 auto; ou text-align:center, et pour les images plus grandes que je peux utiliser position:relative;left:-25%;.

Je suppose que ce que je recherche, c’est un moyen de définir une position par rapport au centre au lieu de la gauche ou de la droite. Est-ce qu'une telle chose existe? Ou existe-t-il d'autres solutions de contournement?

Réponses:

Si vous n’avez pas besoin du support IE8, vous pouvez faire:

left: 50%;
transform: translateX(-50%);

image css:

position:relative;
left:50%;
margin-left: -**yourimageWidth/2**px; (ed: -150px for image with 300px)