How to make popup look at the centre of the screen

Question

When i click a link  a pop up comes out  The thing is that it is not aligned to the centre of the screen  By the way my code also helps the website  and the pop up  to look perfectly in a mobile version    The HTML code     lt a href     data-reveal-id  exampleModal  gt POP UP lt  a gt    lt div id  exampleModal  class  reveal-modal  gt        lt h2 gt POP UP lt  h2 gt        lt p gt        lt font size  4  gt window window window window window window  window            lt  font gt       lt  p gt       lt a class  close-reveal-modal  gt    lt  a gt   lt  div gt    The css code         reveal-modal                  background  e1e1e1           visibility hidden          display none          top 100px           left 50            width 820px           position absolute           z-index 41          padding 30px           -webkit-box-shadow 0 0 10px rgba 0 0 0 0 4           -moz-box-shadow 0 0 10px rgba 0 0 0 0 4            box-shadow 0 0 10px rgba 0 0 0 0 4        I tried putting some right 50  as well but it didn t work  Shouldn t left work

User · Accepted Answer

These are the changes to make   CSS    container       width  100       height  100       top  0      position  absolute      visibility  hidden      display  none      background-color  rgba 22 22 22 0 5      complimenting your modal colors       container target       visibility  visible      display  block     reveal-modal       position  relative      margin  0 auto      top  25            Remove the left  50       HTML    lt a href   container  gt Reveal lt  a gt   lt div id  container  gt       lt div id  exampleModal  class  reveal-modal  gt                    lt a href     gt Close Modal lt  a gt       lt  div gt   lt  div gt    JSFiddle - Updated with CSS only

User · Answer

--------  Bootstrap Modal Popup in Center of Screen --------------     ---------------extra css------    modal       text-align  center      padding  0  important     modal before       content          display  inline-block      height  100       vertical-align  middle      margin-right  -4px     modal-dialog       display  inline-block      text-align  left      vertical-align  middle      ----- Modal Popup -------    lt div class  modal fade  role  dialog  gt       lt div class  modal-dialog   gt           lt div class  modal-content  gt               lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt                       lt span aria-hidden  true  gt    lt  span gt                   lt  button gt                   lt h5 class  modal-title  gt Header lt  h5 gt               lt  div gt               lt div class  modal-body  gt                 body here                    lt  div gt           lt div class  modal-footer  gt                           lt button type  button  class  btn btn-secondary  data-dismiss  modal  gt Close lt  button gt           lt  div gt       lt  div gt   lt  div gt   lt  div gt

User · Answer

If the effect you want is to center in the center of the screen no matter where you ve scrolled to  it s even simpler than that    In your CSS use  for example   div centered    width  100px    height  50px    position fixed     top  calc 50  - 25px      half of width   left  calc 50  - 50px      half of height     No JS required

User · Answer

In order to get the popup exactly centered  it s a simple matter of applying a negative top margin of half the div height  and a negative left margin of half the div width  For this example  like so   div       position  fixed      top  50       left  50       transform  translate -50   -50        width  50

[css] How to make popup look at the centre of the screen?

Examples related to css

Examples related to alignment

[css] How to make popup look at the centre of the screen?

Examples related to css

Examples related to popup

Examples related to alignment