Как грамотно поместить текст в центр картинки?

Question

[ne_pes]

Как грамотно поместить текст в центр картинки? учитывая что картинка будет уменьшаться по ширине и длине и размеры картинки неизвестны? надо как-то наложить блок с текстом поверх картинки, чтобы он имел такую же высоту и ширину, и через флекс выровнять к центру

Answer 1

[Lumore]

https://codepen.io/anon/pen/rdJqjx

Comments

[ne_pes]

Спасибо, помогло! Можете немного подробнее рассказать про то как это работает? хочется смысл понять)
.image-wrapper {
position: relative;
}
.image-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

[Lumore]

У родителя задаете "position: relative", для того чтобы задать рамки для абсолютного позиционирования дочерних элементов, у ".image-text" задаете абсолютное позиционирование от начала и до конца родителя, чтобы он занимал всю ширину и высоту.

[ne_pes]

Lumore, Большое спасибо