Text box is centered, but text inside the box is left-aligned?

Question

css

How to implement this block:

The text block is centered vertically and horizontally, but the text inside the block is left-aligned.
At the same time without setting the width in advance?
The text should be able to take up 100% of the parent's width, there is an implementation (by Ankhena ) but with the option of 50% of the width:
https://jsfiddle.net/gsukrbkf/4/

Answer 1

use flex