Come si centra orizzontalmente un'immagine in un div quando può essere più grande o più piccola? - html, css

Ho un div di larghezza fissa (o, piuttosto, una larghezza percentuale fissa) e voglio includere un'immagine centrata al suo interno.

L'immagine ha un'altezza fissa, ma a volte sarà più stretta del div e altre volte più ampia. Nel caso di immagini che sono più ampie, le sto ritagliando usando overflow:hidden.

In entrambi i casi voglio che l'immagine sia centrata orizzontalmente. Il mio problema è che posso farlo per ogni caso, ma non sono riuscito a trovare una soluzione valida per entrambi.

Per l'immagine che è più piccola della div che posso usare margin:0 auto; o text-align:centere per le immagini più grandi che posso usare position:relative;left:-25%;.

Suppongo che quello che sto cercando sia un modo per definire una posizione rispetto al centro invece che a sinistra oa destra. Esiste una cosa del genere? O ci sono altri rimedi?

risposte:

Se non si richiede il supporto IE8, è possibile:

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

immagine css:

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