<body> probably doesn't have full browser height. Inspect this inside your browser and see what area on the page does <body> actually take. It probably has the same height as your #center here so it cannot really center that #center vertically on the page the way you want it to because its parent (<body>) isn't taller.
Try adding this code to your page and then check if it works and your #center gets centered vertically on the page:
body{min-height:100vh;padding:0;margin:0;}
Padding and margin here is only to remove default browser padding/margin so you don't get scrollbars in this case.
One thing I can definitely suggest to you is to learn how to use your browser dev tools, they are a really great tool to help you debug stuff like this and see visually what is going on. Btw, Firefox probably has the best dev tools for CSS.
<body>probably doesn't have full browser height. Inspect this inside your browser and see what area on the page does<body>actually take. It probably has the same height as your #center here so it cannot really center that #center vertically on the page the way you want it to because its parent (<body>) isn't taller.Try adding this code to your page and then check if it works and your #center gets centered vertically on the page:
Padding and margin here is only to remove default browser padding/margin so you don't get scrollbars in this case.
One thing I can definitely suggest to you is to learn how to use your browser dev tools, they are a really great tool to help you debug stuff like this and see visually what is going on. Btw, Firefox probably has the best dev tools for CSS.
You were right about the body height and I also noticed, instead of #center I had typed .center.
But I still can't get my objects to be centered.
Also, thanks for the points about body height, padding, margin, and dev tools :)