ok, parliamo quindi di elementi <img> da centrare nel proprio contenitore, non di background image, giusto? Come già detto, sono due cose tecnicamente ben diverse tra loro.

Quella tua <img> sta dentro un elemento <a> che a sua volta sta dentro un <div>.

Oltre il tuo transform: translate, qui una possibile soluzione.
Lasciando le cose come stanno nella tua pagina, puoi usare flexbox sull'elemento <a> applicando queste proprietà:
codice:
display: flex;
align-items: center;
justify-content: center;
questo fa in modo di centrare i suoi contenuti (cioè l'elemento <img>). Tenendo conto che hai comunque un'altezza fissa impostata per quelle immagini, questa soluzione funziona per immagini con un formato landscape, cioè più larghe che alte.

Ovviamente sarebbe meglio applicare una specifica classe per quegli elementi <a> in modo che tu gestire più facilmente l'applicazione delle regole CSS.

Una seconda soluzione è quella di usare le nuove proprietà CSS, object-fit e object-position, supportate dai recenti browser.
In questo caso puoi usare queste proprietà sull'elemento <img> usando i valori cover e center, proprio come per le proprietà background-size e background-position.

Considera che il valore di default per object-position è 50% 50%, che corrisponde a center; per cui nel tuo caso ti basta anche solo specificare object-fit:cover.

Considera inoltre che dovrai rimuovere l'attuale max-width:none specificato nel file single-bus-style-1.css sotto la riga 914, perché farebbe conflitto; o magari, se includi una nuova regola, fare un override con un valore auto, ad esempio.