Hi, how can i make the width and height animation grow radially out in CSS?

Question

https://code.sololearn.com/Wpcn1P8BCgbR/#css
When i change the position top to bottom it grows towards to top. Is there a way to grow it from center to the whole page?

Answer 1

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

Answer 2

Thanks Calviղ

Answer 3

In additional to Calviղ's answer,
To center it picture perfect with flexbox, use justify attribute:
justify-content:center;
align-items:center;