How to position the div popup dialog to the center of browser screen

Question

I need to position div popup to the center of browser screen   no matter what size the screen is   And I want to keep the position as absolute as I don t want to move the popup down when I scroll down the page   This div is displayed when button is clicked using Jquery   I tried setting margin-left to half of the width like mentioned in other posts but It isn t working for me   Here is my code  CSS code    holder              width 100       position absolute      left 0      top 0px      display block       popup      width 800px      margin 0 auto      border-radius  7px      background  6b6a63      margin 30px auto 0      padding 6px      content      background  fff      padding  28px 26px 33px 25px      HTML Code      lt div class  holder  gt           lt div id  popup  class  popup  gt                           lt div class  content  gt                          some lengthy text                       lt  div gt           lt  div gt      lt  div gt    Thanks

User · Accepted Answer

Here  this ones working      http   jsfiddle net nDNXc 1   upd  Just in case jsfiddle is not responding here is the code    CSS    holder              width 100       display block     content      background  fff      padding  28px 26px 33px 25px     popup      border-radius  7px      background  6b6a63      margin 30px auto 0      padding 6px           here it comes     position absolute      width 800px      top  50       left  50       margin-left  -400px     1 2 width     margin-top  -40px     1 2 height     HTML    lt div class  holder  gt            lt div id  popup  class  popup  gt                       lt div class  content  gt some lengthy text lt  div gt       lt  div gt   lt  div gt

User · Answer

You can use CSS3  transform    CSS    popup-bck    background-color  rgba 102  102  102   5     position  fixed    width  100     height  100     top  0    left  0    z-index  10     popup-content-box    background-color  white    position  fixed    top  50     left  50     z-index  11  -webkit-transform  translate -50   -50    -moz-transform  translate -50   -50    -ms-transform  translate -50   -50    -o-transform  translate -50   -50    transform  translate -50   -50        HTML    lt div class  popup-bck  gt  lt  div gt   lt div class  popup-content-box  gt  Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat    lt  div gt     so you don t have to use margin-left  -width 2 px

User · Answer

One solution where we need not know the width height of the dialog and then assume the margins    Html    lt div id  dialog-contain  gt    lt -- This div because I assume you might have a display that is not a flex         lt div id  block  gt           lt div id  centered  gt              stuffs          lt  div gt       lt  div gt   lt  div gt    Css    dialog-contain      full page container      position  absolute      height  100       width  100       top  0      left  0              block       another container simply with display flex      display  flex      height  100       width  100       justify-content  center      centered        another container that is always centered      align-self  center

User · Answer

I think you need to make the  holder position relative  and  popup position absolute

User · Answer

popup-content-box      position fixed      left  50       top  50       -ms-transform  translate -50  -50        -moz-transform translate -50  -50        -webkit-transform  translate -50  -50         transform  translate -50  -50

User · Answer

I write a code in jquery  It isnt seen an easy way  But i hope it is useful for you    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt style type  text css  gt    popup      border  4px solid  6b6a63      width  800px      border-radius  7px      margin   auto      padding   20px      position fixed      lt  style gt    lt div id  popup  class  popup  gt  some lengthy text lt br gt  some lengthy text lt br gt  some lengthy text lt br gt  some lengthy text lt br gt  some lengthy text lt br gt  some lengthy text lt br gt  some lengthy text lt br gt  some lengthy text lt br gt   lt  div gt    lt script type  text javascript  src  http   code jquery com jquery-1 7 1 min js  gt  lt  script gt   lt script gt    document  ready function        var popup height   document getElementById  popup   offsetHeight      var popup width   document getElementById  popup   offsetWidth          popup   css  top      window  height  -popup height  2            popup   css  left      window  width  -popup width  2         lt  script gt

User · Answer

Note  This does not directly answer your question  This is deliberate   A List Apart has an excellent CSS Positioning 101 article that is worth reading     more than once  It has numerous examples that include  amongst others  your specific problem  I highly recommend it

User · Answer

It took a while to find the right combination  but this seems to center the overlay or popup content  both horizontally and vertically  without prior knowledge of the content height   HTML    lt div class  overlayShadow  gt       lt div class  overlayBand  gt           lt div class  overlayBox  gt              Your content          lt  div gt       lt  div gt   lt  div gt    CSS    overlayShadow       display  table      position  fixed      left  0px      top  0px      width  100       height  100       background-color  rgba 0  0  0  0 75       z-index  20      overlayBand       display  table-cell      vertical-align  middle      overlayBox       display  table      margin  0 auto 0 auto      width  600px     or whatever        background-color  white     or whatever

User · Answer

Its a classical problem  when you scroll the modal popup generated on the screen stays at it place and does not scroll along  so the user might be blocked as he might not see the popup on his viewable screen   The following link also provides CSS only code for generating a modal box along with its absolute position   http   settledcuriosity wordpress com 2014 10 03 centering-a-popup-box-absolutely-at-the-center-of-screen

[css] How to position the div popup dialog to the center of browser screen?

Examples related to css

Examples related to html

Examples related to position

Examples related to positioning