Centering a div inside a background div with 100% width and 100% height

Question

I'm having some odd trouble. My problem should be a simple fix, but after looking at endless "centering divs" articles, none of the solutions are working and I'm unsure what to do! I've created a JS Fiddle to show my problem.

I need the small red box (#sphere-content) to be centered both horizontally and vertically inside of my gray box (#background). Normally this could be solved by simply setting the margin to "auto 0;", but for some reason, that doesn't seem to be wanting to work. I'm not sure if it has something to do with the parent div being 100% width and height wise?

Here is the relevant code:

    <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/

Thank you so much in advance!

margin:auto is not enough to center vertically ... it only center horizontally — Temani Afif, Aug 11 '18 at 19:12

score 0 · Accepted Answer · answered Aug 11 '18 at 19:12

0

You can do that by adding margin: auto to #sphere-content, and adding display: flex to #background html element.

JSFiddle

answered Aug 11 '18 at 19:12

Arup Rakshit

116,827
30
260
317

Why it is not good answer? Explain please. – Arup Rakshit Aug 11 '18 at 19:14
1

Yep, your answer works well. Nothing wrong with your answer. – VSM Aug 11 '18 at 19:23
@VSM Thanks for confirming. I thought I had mistakes. Not sure why I got `-1` in the first place. – Arup Rakshit Aug 11 '18 at 19:25

Centering a div inside a background div with 100% width and 100% height

1 Answers1