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?