::After-Pseudoelement mittig zu Element platzieren

[Tobias]

Hallo ihr Lieben,

ich bräuchte einmal Hilfe beim Gestalten einer Webseite mit CSS. Ich habe dort Profilbilder von Menschen, auf die man klicken soll. Dann öffnet sich deren Profil:

Ich habe ein ::after Pseudoelement zur "Profilbild"-Klasse der Bilder (= img in figure, erzwingt wordpress so) erstellt. Darin ist der content "-> Profil". Ich möchte jetzt, dass der Schriftzug immer mittig zum Foto angezeigt wird.

Momentan sieht meine Notlösung wie folgt aus:

.Profilbild {
    position: relative;
		transition-duration: 0.2s;
}

.Profilbild img {
	transition-duration 0.2s;
}

.Profilbild::after {
    content:  '→ Profil';
    font-family: 'GrueneType';
    align-self: center;
    color: white;
    font-size: 20px;
    display: block;
    position: absolute;
		left: 37%;
    bottom: 1em;   
		transition-duration: 0.2s;
}

.Profilbild:hover::after {
	font-size: larger;
	transition-duration: 0.2s;
}
.Profilbild img:hover {
	  box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
    transform: scale(1.01);
    transition-duration: 0.2s;
}

Das ist jetzt aber nicht optimal, da sich die width des <div>-containers je nach viewport verändert, sodass der Abstand von links sich auf die Position im <img> auswirkt. Manchmal ist der Textzug weiter links, mal mittiger.

Habt ihr eine bessere Lösung, die an den effekt von text-align: center herankommt?

Vielen Dank schon einmal!