How to Position a Div in the Middle of the Screen When the Page Is Bigger Than the Screen

How to position a div in the middle of the screen when the page is bigger than the screen

just add position:fixed and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

Positioning div element at center of screen

The easy way, if you have a fixed width and height:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

Please don't use inline styles! Here is a working example http://jsfiddle.net/S5bKq/.

Center a 'div' in the middle of the screen, even when the page is scrolled up or down?

Change the position attribute to fixed instead of absolute.

CSS - div always absolute middle left of screen even if page scroll

.timer {
  position: fixed;
  top: 50%;
  left: 0px;
  transform: translateY(-50%)
}

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

your idea is correct if needed you can try out all possible values to figure out which gives you the result.

https://www.w3schools.com/css/css_positioning.asp

How to align a div to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

How to Position a Div in the Middle of the Screen When the Page Is Bigger Than the Screen