How to center align without relative/absolute?

Question

css

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

I need to put the text in the center of the blue element and clean up the pink background so that it wraps around the text. Also, when you enter text, no matter how big it gets, it should stick to the center and be evenly distributed. How to do it without using relative/absolute?

Answer 1