I am making a javascript game where the background scrolls as arrow keys are pushed. That functionality currently works however now I need to place the player in the center of the screen. I have attempted to use width=50% as suggested by stack overflow on many other questions, to no avail, the circle just doesn't appear. The only way I am finding I can make the circle move is using right and bottom tags, which won't dynamically update based on the window size.
#circle {
position: absolute;
bottom: 200px;
right: 300px;
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: blue;
}
This is my circle.
body {
position: absolute;
background-image: url("bg.png");
right: 1px;
bottom: 1px;
}
This is my body, which moves around with the help of some javascript.
<body id="body" onload="loader()">
<div id="circle"></div>
</body>
I am assuming I have made a simple mistake, but this is my first time using HTML/CSS so I'm pretty boneheaded and I've been working on this for hours.