Create a div in the center of the screen no matter what the position of the scroll bar is

Question

I'm creating a simple notification div which appears when I press one of buttons and then disappears by itself:

I can create a div dynamically which is in the center of the screen by clicking on one of the buttons:

    var el = document.createElement("div");
    el.setAttribute("style","position:absolute;top:50%;left:50%;background-color:white;");
    el.innerHTML = msg;
    document.body.appendChild(el);

The problem is, when I scroll down a page and click on another button, the div appears outside of visible area. How can I create it in the center of the screen no matter if the page is scrolled down or up? It should always appear in the center of the screen where it can be seen.

Note that element with `left: 50%; top: 50%;` will neverbe in the middle of screen when it isn't empty. — pavel, Jun 02 '15 at 10:00

score 1 · Accepted Answer · edited Jun 03 '15 at 05:39

1

Use position: fixed; instead of position: absolute;

edited Jun 03 '15 at 05:39

royhowie

11,075
14
50
67

answered Jun 02 '15 at 09:56

user3227295

2,168
1
11
17

Create a div in the center of the screen no matter what the position of the scroll bar is

1 Answers1