How to make DIV in center dynamic

Question

I want to make DIV always in center, no matter when scroll to any place, div always in center of screen. I copy the source code from google search, but it seems like it is only on the top of the screen, however, when I scroll down the center and click the button again, it is on top, not in the screen anymore

function buttonTrigger() {
    document.getElementById("centerDIV").style.display = "block";
}

    * {
        margin: 0;
        padding: 0;
        background-color: #EAEAEA;
    }
    
    div {
        width: 200px;
        height: 200px;
        background-color: #1E90FF;
    }

    body {
        height: 2000px;
    }
    
    .center-in-center {
        border: 1px red solid;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
        width: 100px;
        height: 100px;
        display: none;
        transform: translate(-50%, -50%);
        z-index: 100;
    }

<input type="button" value="button" onclick="buttonTrigger()" />
<div class="center-in-center" id='centerDIV'></div>

score 0 · Answer 1 · answered Sep 05 '20 at 22:08

Try position: fixed

function buttonTrigger() {
  document.getElementById("centerDIV").style.display = "block";
}

* {
  margin: 0;
  padding: 0;
  background-color: #EAEAEA;
}

div {
  width: 200px;
  height: 200px;
  background-color: #1E90FF;
}

body {
  height: 2000px;
}

.center-in-center {
  border: 1px red solid;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  display: none;
  transform: translate(-50%, -50%);
  z-index: 100;
}

<input type="button" value="button" onclick="buttonTrigger()" />
<div class="center-in-center" id='centerDIV'></div>

How to make DIV in center dynamic

1 Answers1