Why isn't it centered?

Question

So, I have made an HTML code
This is just a div that moves using css animation
But can anyone tell me why isn't it centered
Note: I want it in the center of the screen
https://sololearn.com/compiler-playground/WmstxUgO2vM2/?ref=app

Answer 1

The container div with the center class only takes as much size as necessary to contain the box.

https://sololearn.com/compiler-playground/WMFRrhzTQ2JV/?ref=app

You could adjust the size of the container div.

Answer 2

In the HTML file, the <div class="box"></div>
Just add <center>
<div class="box"><center></div>
it will center the box

Answer 3

Add
height:100vh;
to "center" class