Make this div appear the middle of the body?

Question

I am trying to make a div appear in the middle of the browser. However, I am unable to find any form of guide working with the CSS I already have.

CSS

#register-modal {
    display: inline;
    position: absolute;
    z-index: 1;
    margin: 0 auto;
    background-color: aqua;
    top: 50%;
    left: 50%;
    text-align: center;
}

With this CSS I expected the div to appear in the middle of the browser windows, but it appears in the bottom right corner.

The HTML affected by the CSS forms a "modal" and thus I can't have the position be anything other than absolute.

Use `transform: translate(-50%, -50%)` in addition to your code. Also, consider `position: fixed` if you want the element to remain centered while scrolling. — Angel Politis, Jul 17 '19 at 17:47
With that CSS, it should not appear at all (`display: none`)... — Heretic Monkey, Jul 17 '19 at 17:47
"in the middle of the body" and "in the middle of the browser (window)" are two very different things. Your CSS looks like you're going for the middle of the browser; if that's the case you should change the _title_ of your question. — Stephen P, Jul 17 '19 at 18:33
Can you change your comment to an answer @AngelPolitis? @OP Can you accept the answer once he posts it? — Akin Okegbile, Jul 17 '19 at 19:06
I cannot because the question is closed, @AkinOkegbile. Besides, a suitable answer can be found in any of the duplicate ones. — Angel Politis, Jul 17 '19 at 21:56

score 0 · Answer 1 · answered Jul 17 '19 at 18:21

You can easily achieve this by using the flex layout. And by setting the justify-content and align-items to center

justify-content: align the items on the main axis. align-items: align the items on cross axis.

You can read about it more on the MDN doc

.container{
display:flex;
justify-content: center;
align-items: center;
width:100%;
height:100%
}
body, html {
width:100%;
height: 100%;
}

<div class="container">
<div class="sub-container">Child</div>
</div>

Make this div appear the middle of the body?

1 Answers1