How to align center no relative/absolute?

Here is my code: https://jsfiddle.net/h5yox1r0/6/
In the css code, the tagged required place with the comment /* cards */

I need the text to put at the center of the blue element and lay the pink background to wrap the text. Besides, when you type text, no matter how big he became, he should stick to center and evenly distributed. How to do it without using relative/absolute?
April 19th 20 at 12:20
2 answers
April 19th 20 at 12:22
Solution
April 19th 20 at 12:24
Solution
https://codepen.io/5h4dy_s/pen/XWmdrKK

#slideshow .slide-text
it is better not to do such nesting with css

#slideshow
and don't use id's in css classes for this is

Find more questions by tags CSS