Centering with aspect ratio

Question

So a few days ago, I learned a nice little trick about how to maintain the aspect ratio of an element, and wanted to apply it a new web project of mine.
The thing with the aspect ratio even works as intended, but now my problem is that I am unable to center elements inside of those elements I applied the aspect ratio stuff to, because my usual way of applying
top: 50; left: 50;
transform: translate( -50%, -50% );
fails in this case.
See this example code, it probably shows the issue better:
https://code.sololearn.com/W4GkXa860rmn/?ref=app

Now my question is, is there a generic way to have the <p> tag centered under these circumstances, or is there even a better way for maintaining the aspect ratio of the <div> tag?

Answer 1

You could use display: flex with child element set to margin: auto

https://code.sololearn.com/W2N5HN4fMe8E/?ref=app

Answer 2

Well, that looks convenient. And easy to apply. Thanks a bunch, Calviղ!

Answer 3

Use

#foo {
width: 20vw;
height: 20vw;
}

You would not need the pseodo element #foo:before