I'm experiencing an unusual issue. Despite my efforts to center the small red box (#sphere-content) inside the gray box (#background), none of the typical solutions seem to be working. I've spent a considerable amount of time researching "centering divs" but still can't resolve the problem. A JS Fiddle has been created to illustrate the issue.
The standard method of setting the margin to "auto 0;" should normally align the box both horizontally and vertically, but in this case, it's not having the desired effect. Could it be due to the parent div being set to 100% width and height?
Below is the relevant code snippet:
<div id="background">
<div id="sphere-content"></div>
</div>
#background {
margin: 0px;
padding: 0px;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
background-color: #d5d5d5;
}
#sphere-content {
background-color: red;
width: 50px;
height: 50px;
margin: 0 auto;
}
JS Fiddle: https://jsfiddle.net/e9pL4xg3/11/
Your assistance would be greatly appreciated!