"horizontally center this text inside its rectangular element"
And another one for:
"vertically center this text inside its rectangular element"
The issue of centering wrapped multiline text has been solved in many UI libraries.
But things can quickly get very complicated. This all needs to be done in the context of a ton of other CSS rules that could alter layout. And by the way, what do you mean by "vertically centered"? Using the font's baseline? Text top? Bottom? How are we dealing with text overflow if there isn't enough room in your rectangular element?
justify-content: safe center; align-items: safe center;
On the parent:
position: relative;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);