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

Question

I have in my page a button which when clicked displays a div  popup style  in the middle of my screen   I am using the following CSS to center the div in the middle of the screen    PopupPanel       border  solid 1px black      position  absolute      left  50       top  50       background-color  white      z-index  100       height  400px      margin-top  -200px       width  600px      margin-left  -300px      This CSS works fine as long as the page is not scrolled down   But  if I place the button at the bottom of my page  when it is clicked  the div is displayed at the top  and the user has to scroll up to view the contents of the div   I would like to know how to display the div in the middle of the screen  even when the page has been scrolled

User · Answer

Correct Method is    PopupPanel       border  solid 1px black      position  fixed      left  50       top  50       background-color  white      z-index  100      height  400px      margin-top  -200px       width  600px      margin-left  -300px

User · Answer

Quote   I would like to know how to display the div in the middle of the   screen  whether user has scrolled up down    Change  position  absolute    To  position  fixed      W3C specifications for position  absolute and for position  fixed

User · Answer

I just found a new trick to center a box in the middle of the screen even if you don t have fixed dimensions  Let s say you would like a box 60  width   60  height  The way to make it centered is by creating 2 boxes  a  container  box that position left  50  top  50   and a  text  box inside with reverse position left  -50   top  -50    It works and it s cross browser compatible   Check out the code below  you probably get a better explanation    x000D   x000D  jQuery   close a   bg     message   on  click   function     x000D    jQuery   message   fadeOut    x000D    return false  x000D      x000D  html  body   x000D    min-height  100   x000D    x000D   x000D   message   x000D    height  100   x000D    left  0  x000D    position  fixed  x000D    top  0  x000D    width  100   x000D    x000D   x000D   message  container   x000D    height  60   x000D    left  50   x000D    position  absolute  x000D    top  50   x000D    z-index  10  x000D    width  60   x000D    x000D   x000D   message  container  text   x000D    background   fff  x000D    height  100   x000D    left  -50   x000D    position  absolute  x000D    top  -50   x000D    width  100   x000D    x000D   x000D   message  bg   x000D    background  rgba 0  0  0  0 5   x000D    height  100   x000D    left  0  x000D    position  absolute  x000D    top  0  x000D    width  100   x000D    z-index  9  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div id  message  gt  x000D     lt div class  container  gt  x000D       lt div class  text  gt  x000D         lt h2 gt Warning lt  h2 gt  x000D         lt p gt The message lt  p gt  x000D         lt p class  close  gt  lt a href     gt Close Window lt  a gt  lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  bg  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Change position absolute  to position fixed

User · Answer

Change the position attribute to fixed instead of absolute

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

Examples related to html

Examples related to css

Examples related to scroll

Examples related to position

Examples related to centering