Я не могу поместить текст в центр изображения (поверх изображения) и не буду менять положение при его сворачивании или р ⇐ CSS

[Anonymous]

Я хочу поместить текст (текст субтитров) внутри изображения, которое имеет центр выравнивания. Это необходимо центрировать, даже если оно минимизируется или максимизируется. Я попытался использовать преобразование и поставить левое и верхнее: 50%, но это не работает и продолжает переполняться на экране (за пределами изображения). Кто-нибудь может мне помочь? Я перепробовал все, что есть в сети, а также использовал образец с этой платформы, но он не работает.


Title


.title {
position: absolute;
text-align: center;
color: #fff;
font-weight: 900;
font-style: bold;
font-size: 1rem;
font-family: b;
}
.fa {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.fa img {
width: 30%;
height: 1.5rem;
display: block;
margin: 0 auto;
}
.subtitle {
position: relative;
display: flex;
margin: 0.5rem;
text-align: center;
align-items: center;
}
.subtitle img {
width: 23%;
}
.subtitle .subtitle-text{
position: absolute;
text-align: center;
justify-content: center;
color: #fff;
font-weight: 900;
font-style: bold;
font-size: 0.8rem;
font-family: b;
left: 4%;
}
.main {
padding: 1rem 0;
overflow-x: hidden;
}
.main .box{
width: 100%;
margin: 0 auto;
text-align: center;
color: #292B32;
margin-right: 1.5rem;
font-size: 0.65rem;
font-weight: 400;
font-family: b;
}





title




subtext








Подробнее здесь: https://stackoverflow.com/questions/777 ... wont-chang