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

Question

Hi I m using something similiar to the following to get a div positioned in the middle of the screen    lt style type  text css  gt    mydiv       position absolute      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      lt  style gt     lt div id  mydiv  gt Test Div lt  div gt    However the problem with this is it positions the item in the middle of the page not the screen  So if the page is a few screen high and I m at the top of the page  the top part of the part is displayed on the screen  when I make the div appear it s not even on the screen  You have to scroll down to view it   Can someone please tell me how you d make it appear in the middle of the screen

User · Answer

I think this is a simple solution    x000D   x000D   lt div style   x000D      display  inline-block  x000D      position  fixed  x000D      top  0  x000D      bottom  0  x000D      left  0  x000D      right  0  x000D      width  200px  x000D      height  100px  x000D      margin  auto  x000D      background-color   f3f3f3   gt Full Center ON Page x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For this you would have to detect screen size  That is not possible with CSS or HTML  you need JavaScript  Here is the Mozilla Developer Center entry on window properties https   developer mozilla org en DOM window Properties  Detect the available height and position accordingly

User · Answer

USING FLEX   display  flex  height  100   align-items  center  justify-content  center

User · Answer

In ur script page             a-middle   css  margin-top   function              return    window  height   -   this  height      2           Use a-middle class in the Div         lt div class  a-middle  gt

User · Answer

Short answer  Just add position fixed and that will solve your problem

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt style gt  x000D   loader   x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    margin-top  -50px  x000D    margin-left  -50px  x000D    border  10px solid  dcdcdc  x000D    border-radius  50   x000D    border-top  10px solid  3498db  x000D    width  30px  x000D    height  30px  x000D    -webkit-animation  spin 2s linear infinite  x000D    animation  spin 1s linear infinite    x000D    x000D   x000D   -webkit-keyframes spin   x000D    0    -webkit-transform  rotate 0deg     x000D    100    -webkit-transform  rotate 360deg     x000D    x000D   x000D   keyframes spin   x000D    0    transform  rotate 0deg     x000D    100    transform  rotate 360deg     x000D    x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   x000D   lt div class  loader  style  display block  gt  lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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

User · Answer

lt html gt   lt head gt       lt style type  text css  gt    mydiv       position absolute      top  0      left  0      right  0      bottom  0      width 100px      height 200px      margin auto      border  1px solid  ccc      background-color   f3f3f3         lt  style gt   lt  head gt   lt body gt   lt div id  mydiv  gt Maitrey lt  div gt   lt  body gt   lt  html gt

User · Answer

Just put margin auto      mydiv       margin auto      position absolute      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         lt div id  mydiv  gt Test Div lt  div gt

User · Answer

width 30em  position  static  margin  0px auto 0px auto  padding  0px

User · Answer

Use transform    lt style type  text css  gt       mydiv           position  fixed          top  50           left  50           transform  translate -50   -50           lt  style gt    Javascript Solution    var left    screen width   2  -  530   2   var top    screen height   2  -  500   2   var  url    PopupListRepair aspx   window open  url  self   width 530px height 500px status yes resizable no toolbar no menubar no left     left     top     top     scrollbars no

User · Answer

position  fixed  top  0  bottom  0  left  0  right  0  margin  auto    This worked for me

User · Answer

div       top  50       left  50       position fixed     just set the above three properties any of your element and there you Go  Your div is exactly at the center of the screen

User · Answer

Two ways to position a tag in the middle of screen or its parent tag  Using positions  Set the parent tag position to relative  if the target tag has a parent tag  and then set the target tag style like this   center             position  absolute    top  50     left  50     transform  translate -50   -50       Using flex  The parent tag style should looks like this   parent-tag     display  flex    align-items  center    justify-content  center

User · Answer

Well  below is the working example for this   This will handle the center position if you resize the webpage or load in anysize    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt style gt  x000D   loader   x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    margin-top  -50px  x000D    margin-left  -50px  x000D    border  10px solid  dcdcdc  x000D    border-radius  50   x000D    border-top  10px solid  3498db  x000D    width  30px  x000D    height  30px  x000D    -webkit-animation  spin 2s linear infinite  x000D    animation  spin 1s linear infinite    x000D    x000D   x000D   -webkit-keyframes spin   x000D    0    -webkit-transform  rotate 0deg     x000D    100    -webkit-transform  rotate 360deg     x000D    x000D   x000D   keyframes spin   x000D    0    transform  rotate 0deg     x000D    100    transform  rotate 360deg     x000D    x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   x000D   lt div class  loader  style  display block  gt  lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    In above sample loading div will always be in center   Hoping this will help you

User · Answer

Try this one    centered     position  fixed    top  50     left  50     transform  translate -50   -50

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

Examples related to css

Examples related to html

Examples related to window

Examples related to center