Using jQuery to center a DIV on the screen

Question

How do I go about setting a  lt div gt  in the center of the screen using jQuery

User · Answer

Normally  I would do this with CSS only    but since you asked you a way to do this with jQuery     The following code centers a div both horizontally and vertically inside its container     x000D   x000D      target   addClass  centered-content   x000D               wrap   lt div class  center-outer-container  gt  lt  div gt    x000D               wrap   lt div class  center-inner-container  gt  lt  div gt     x000D  body   x000D      margin   0  x000D      background   ccc  x000D    x000D   x000D   center-outer-container   x000D      position   absolute  x000D      display  table  x000D      width  100   x000D      height  100   x000D    x000D   x000D   center-inner-container   x000D      display  table-cell  x000D      vertical-align  middle  x000D      text-align  center  x000D    x000D   x000D   centered-content   x000D      display  inline-block  x000D      text-align  left  x000D      background   fff  x000D      padding   20px  x000D      border   1px solid  000  x000D    x000D   lt script type  text javascript  src  https   code jquery com jquery-1 12 1 min js  gt  lt  script gt  x000D   lt div id  target  gt Center this  lt  div gt  x000D   x000D   x000D     see also this Fiddle

User · Answer

It can be done with only CSS  But they asked with jQuery or JavaScript Here  use CSS Flex box property to align the div center  body center    display flex    align-items center     Vertical alignment   justify-content center     Horizontal alignment     align-items center  - used to align vertically    justify-content center  - used to align horizontally    x000D   x000D  document querySelector  body   classList add  center    x000D  body     margin   0    height 100vh    width 100     background   ccc     main    background  00cc00    width 100px    height 100px    body center    display flex    align-items center    justify-content center    x000D   lt body gt     lt div id  main  gt  lt  div gt   lt  body gt  x000D   x000D   x000D

User · Answer

Please use this         window  resize function            className   css           position  absolute           left     window  width   -     className   outerWidth    2          top     window  height   -     className   outerHeight    2                 To initially run the function    window  resize

User · Answer

I like adding functions to jQuery so this function would help   jQuery fn center   function          this css  position   absolute        this css  top   Math max 0      window  height   -   this  outerHeight      2                                                       window  scrollTop       px        this css  left   Math max 0      window  width   -   this  outerWidth      2                                                       window  scrollLeft       px        return this      Now we can just write     element  center      Demo  Fiddle  with added parameter

User · Answer

I would use the jQuery UI position function   See working demo    lt div id  test  style  position absolute background-color blue color white  gt      test div to center in window  lt  div gt    If i have a div with id  test  to center then the following script would center the div in the window on document ready   the default values for  my  and  at  in the position options are  center     lt script type  text javascript  gt    function          test   position        of    window            lt  script gt

User · Answer

Just say      divID   html       html     divID   html

User · Answer

I like adding functions to jQuery so this function would help   jQuery fn center   function          this css  position   absolute        this css  top   Math max 0      window  height   -   this  outerHeight      2                                                       window  scrollTop       px        this css  left   Math max 0      window  width   -   this  outerWidth      2                                                       window  scrollLeft       px        return this      Now we can just write     element  center      Demo  Fiddle  with added parameter

User · Answer

You could use the CSS translate property   position  absolute  transform  translate -50   -50      Read this post for more details

User · Answer

Here is my version  I may change it after I look at these examples     fn pixels   function property       return parseInt this css property          fn center   function        var w      w       return this each function              this  css  position   absolute              this  css  top    w height   -   this  height      2  -     this  pixels  padding-top       this  pixels  padding-bottom      2    w scrollTop      px              this  css  left    w width   -   this  width      2  -     this  pixels  padding-left       this  pixels  padding-right      2    w scrollLeft      px

User · Answer

You can use CSS alone to center like so   Working Example   x000D   x000D   center  x000D      position  absolute  x000D      height  50px  x000D      width  50px  x000D      background red  x000D      top calc 50  - 50px 2      height divided by 2   x000D      left calc 50  - 50px 2      width divided by 2   x000D    x000D   lt div class  center  gt  lt  div gt  x000D   x000D   x000D    calc   allows you to do basic calculations in css   MDN Documentation for calc   Browser support table

User · Answer

You could use the CSS translate property   position  absolute  transform  translate -50   -50      Read this post for more details

User · Answer

I dont think having an absolute position would be best if you want an element always centered in the middle of the page  You probably want a fixed element  I found another jquery centering plugin that used fixed positioning  It is called fixed center

User · Answer

I put a jquery plugin here VERY SHORT VERSION     myDiv   css  top  50   left  50   margin  -       myDiv   height     2   px 0 0 -       myDiv   width     2   px      SHORT VERSION  function           fn extend           center  function                  return this each function                     var top      window  height   -   this  outerHeight      2                  var left      window  width   -   this  outerWidth      2                    this  css  position  absolute   margin 0  top   top  gt  0   top   0   px   left   left  gt  0   left   0   px                                           jQuery    Activated by this code       mainDiv   center     PLUGIN VERSION  function            fn extend             center  function  options                   var options      extend      Default values                     inside window     element  center into window                     transition  0     millisecond  transition time                     minX 0     pixel  minimum left element value                     minY 0     pixel  minimum top element value                     withScrolling true     booleen  take care of the scrollbar  scrollTop                      vertical true     booleen  center vertical                     horizontal true    booleen  center horizontal                   options                  return this each function                         var props    position  absolute                        if  options vertical                             var top      options inside  height   -   this  outerHeight      2                           if  options withScrolling  top      options inside  scrollTop      0                           top    top  gt  options minY   top   options minY                              extend props   top  top  px                                               if  options horizontal                              var left      options inside  width   -   this  outerWidth      2                            if  options withScrolling  left      options inside  scrollLeft      0                            left    left  gt  options minX   left   options minX                               extend props   left  left  px                                               if  options transition  gt  0    this  animate props  options transition                       else   this  css props                       return   this                                              jQuery    Activated by this code     document  ready function            mainDiv   center          window  bind  resize   function                 mainDiv   center  transition 300                is that right   UPDATE   From CSS-Tricks  center     position  absolute    left  50     top  50     transform  translate -50   -50       Yep       width  48     height  59

User · Answer

It can be done with only CSS  But they asked with jQuery or JavaScript Here  use CSS Flex box property to align the div center  body center    display flex    align-items center     Vertical alignment   justify-content center     Horizontal alignment     align-items center  - used to align vertically    justify-content center  - used to align horizontally    x000D   x000D  document querySelector  body   classList add  center    x000D  body     margin   0    height 100vh    width 100     background   ccc     main    background  00cc00    width 100px    height 100px    body center    display flex    align-items center    justify-content center    x000D   lt body gt     lt div id  main  gt  lt  div gt   lt  body gt  x000D   x000D   x000D

User · Answer

Lot s of ways to do this  My object is kept hidden with display none just inside the BODY tag so that positioning is relative to the BODY  After using     object id   show    I call     object id   center    I use position absolute because it is possible  especially on a small mobile device  that the modal window is larger than the device window  in which case some of the modal content could be inaccessible if positioning was fixed   Here s my flavor based on other s answers and my specific needs     fn center   function              this css  position   absolute               use   so that modal window will adjust with browser resizing         this css  top   50             this css  left   50                use negative margin to center         this css  margin-left   -1 this outerWidth   2     window  scrollLeft     px            this css  margin-top   -1 this outerHeight   2     window  scrollTop     px               catch cases where object would be offscreen         if this offset   top lt 0 this css   top   5px   margin-top   0             if this offset   left lt 0 this css   left   5px   margin-left   0              return this

User · Answer

Why you don t use CSS for centering a div    timer wrap      position  fixed    left  50     top  50

User · Answer

This is untested  but something like this should work   var myElement       myElement    myElement css       position   absolute       left   50         margin-left   0 -  myElement width     2

User · Answer

This is untested  but something like this should work   var myElement       myElement    myElement css       position   absolute       left   50         margin-left   0 -  myElement width     2

User · Answer

I dont think having an absolute position would be best if you want an element always centered in the middle of the page  You probably want a fixed element  I found another jquery centering plugin that used fixed positioning  It is called fixed center

User · Answer

i use this     function            divId   css        left     50         top     50         position     absolute        margin-left    -    divId   outerWidth   2       margin-top    -    divId   outerHeight   2

User · Answer

This is great   I added a callback function  center  function  options  callback        if  options transition  gt  0         this  animate props  options transition  callback     else          this  css props      if  typeof callback     function        make sure the callback is a function        callback call this      brings the scope to the callback

User · Answer

No need jquery for this  I used this to center  Div element  Css Style    black overlay      display  none      position  absolute      top  0       left  0       width  100       height  100       background-color  black      z-index 1001      -moz-opacity  0 8      opacity  80      filter  alpha opacity 80       white content       display  none      position  absolute      top  25       left  25       width  50       height  50       padding  16px      border  16px solid orange      background-color  white      z-index 1002      overflow  auto      Open element    document  ready function            open   click function e             black overlay   fadeIn 200

User · Answer

The transition component of this function worked really poorly for me in Chrome  didn t test elsewhere   I would resize the window a bunch and my element would sort of scoot around slowly  trying to catch up    So the following function comments that part out  In addition  I added parameters for passing in optional x  amp  y booleans  if you want to center vertically but not horizontally  for example      Center an element on the screen  function         fn extend       center  function  x y             var options      extend  transition 300  minX 0  minY 0   options         return this each function                     if  x    undefined                        x   true                                    if  y    undefined                        y   true                                    var  this     this                   var  window     window                    this css                       position   absolute                                       if  x                        var left     window width   -  this outerWidth    2  window scrollLeft                         this css  left  left                                    if   y    false                var top     window height   -  this outerHeight    2  window scrollTop                            this css  top  top                                  this  animate                top   top  gt  options minY   top   options minY   px                left   left  gt  options minX   left   options minX   px                options transition           return   this                            jQuery

User · Answer

Please use this         window  resize function            className   css           position  absolute           left     window  width   -     className   outerWidth    2          top     window  height   -     className   outerHeight    2                 To initially run the function    window  resize

User · Answer

CSS solution In two lines only It centralize your inner div horizontally and vertically   outer    display  flex     inner    margin  auto     for only horizontal align  change margin  0 auto   and for vertical  change margin  auto 0

User · Answer

MY UPDATE TO TONY L S ANSWER This is the modded version of his answer that I use religiously now  I thought I would share it  as it adds slightly more functionality to it for various situations you may have  such as different types of position or only wanting horizontal vertical centering rather than both    center js      We add a pos parameter so we can specify which position type we want     Center it both horizontally and vertically  dead center  jQuery fn center   function  pos        this css  position   pos       this css  top      window  height     2  -  this outerHeight     2        this css  left      window  width     2  -  this outerWidth     2        return this        Center it horizontally only jQuery fn centerHor   function  pos        this css  position   pos       this css  left      window  width     2  -  this outerWidth     2        return this        Center it vertically only jQuery fn centerVer   function  pos        this css  position   pos       this css  top      window  height     2  -  this outerHeight     2        return this      In my  lt head gt     lt script src  scripts center js  gt  lt  script gt    Examples of usage       example1   centerHor  absolute       example2   centerHor  fixed        example3   centerVer  absolute       example4   centerVer  fixed        example5   center  absolute       example6   center  fixed     It works with any positioning type  and can be used throughout your entire site easily  as well as easily portable to any other site you create  No more annoying workarounds for centering something properly    Hope this is useful for someone out there  Enjoy

User · Answer

CSS solution In two lines only It centralize your inner div horizontally and vertically   outer    display  flex     inner    margin  auto     for only horizontal align  change margin  0 auto   and for vertical  change margin  auto 0

User · Answer

I would use the jQuery UI position function   See working demo    lt div id  test  style  position absolute background-color blue color white  gt      test div to center in window  lt  div gt    If i have a div with id  test  to center then the following script would center the div in the window on document ready   the default values for  my  and  at  in the position options are  center     lt script type  text javascript  gt    function          test   position        of    window            lt  script gt

User · Answer

I m expanding upon the great answer given by  TonyL  I m adding Math abs   to wrap the values  and also I take into account that jQuery might be in  no conflict  mode  like for instance in WordPress   I recommend that you wrap the top and left values with Math abs   as I have done below  If the window is too small  and your modal dialog has a close box at the top  this will prevent the problem of not seeing the close box  Tony s function would have had potentially negative values  A good example on how you end up with negative values is if you have a large centered dialog but the end user has installed several toolbars and or increased his default font -- in such a case  the close box on a modal dialog  if at the top  might not be visible and clickable   The other thing I do is speed this up a bit by caching the   window  object so that I reduce extra DOM traversals  and I use a cluster CSS   jQuery fn center   function         var w     window     this css        position   absolute        top  Math abs   w height   - this outerHeight      2    w scrollTop          left  Math abs   w width   - this outerWidth      2    w scrollLeft            return this      To use  you would do something like   jQuery document  ready function           myelem   center

User · Answer

I would recommend jQueryUI Position utility     your-selector   position       of    window        which gives you much more possibilities than only centering

User · Answer

Why you don t use CSS for centering a div    timer wrap      position  fixed    left  50     top  50

User · Answer

This is untested  but something like this should work   var myElement       myElement    myElement css       position   absolute       left   50         margin-left   0 -  myElement width     2

User · Answer

I m expanding upon the great answer given by  TonyL  I m adding Math abs   to wrap the values  and also I take into account that jQuery might be in  no conflict  mode  like for instance in WordPress   I recommend that you wrap the top and left values with Math abs   as I have done below  If the window is too small  and your modal dialog has a close box at the top  this will prevent the problem of not seeing the close box  Tony s function would have had potentially negative values  A good example on how you end up with negative values is if you have a large centered dialog but the end user has installed several toolbars and or increased his default font -- in such a case  the close box on a modal dialog  if at the top  might not be visible and clickable   The other thing I do is speed this up a bit by caching the   window  object so that I reduce extra DOM traversals  and I use a cluster CSS   jQuery fn center   function         var w     window     this css        position   absolute        top  Math abs   w height   - this outerHeight      2    w scrollTop          left  Math abs   w width   - this outerWidth      2    w scrollLeft            return this      To use  you would do something like   jQuery document  ready function           myelem   center

User · Answer

You can use CSS alone to center like so   Working Example   x000D   x000D   center  x000D      position  absolute  x000D      height  50px  x000D      width  50px  x000D      background red  x000D      top calc 50  - 50px 2      height divided by 2   x000D      left calc 50  - 50px 2      width divided by 2   x000D    x000D   lt div class  center  gt  lt  div gt  x000D   x000D   x000D    calc   allows you to do basic calculations in css   MDN Documentation for calc   Browser support table

User · Answer

I put a jquery plugin here VERY SHORT VERSION     myDiv   css  top  50   left  50   margin  -       myDiv   height     2   px 0 0 -       myDiv   width     2   px      SHORT VERSION  function           fn extend           center  function                  return this each function                     var top      window  height   -   this  outerHeight      2                  var left      window  width   -   this  outerWidth      2                    this  css  position  absolute   margin 0  top   top  gt  0   top   0   px   left   left  gt  0   left   0   px                                           jQuery    Activated by this code       mainDiv   center     PLUGIN VERSION  function            fn extend             center  function  options                   var options      extend      Default values                     inside window     element  center into window                     transition  0     millisecond  transition time                     minX 0     pixel  minimum left element value                     minY 0     pixel  minimum top element value                     withScrolling true     booleen  take care of the scrollbar  scrollTop                      vertical true     booleen  center vertical                     horizontal true    booleen  center horizontal                   options                  return this each function                         var props    position  absolute                        if  options vertical                             var top      options inside  height   -   this  outerHeight      2                           if  options withScrolling  top      options inside  scrollTop      0                           top    top  gt  options minY   top   options minY                              extend props   top  top  px                                               if  options horizontal                              var left      options inside  width   -   this  outerWidth      2                            if  options withScrolling  left      options inside  scrollLeft      0                            left    left  gt  options minX   left   options minX                               extend props   left  left  px                                               if  options transition  gt  0    this  animate props  options transition                       else   this  css props                       return   this                                              jQuery    Activated by this code     document  ready function            mainDiv   center          window  bind  resize   function                 mainDiv   center  transition 300                is that right   UPDATE   From CSS-Tricks  center     position  absolute    left  50     top  50     transform  translate -50   -50       Yep       width  48     height  59

User · Answer

you re getting that poor transition because you re adjusting the position of the element every time the document is scrolled  What you want is to use fixed positioning  I tried that fixed center plugin listed above and that seems to do solve the problem nicely  Fixed positioning allows you to center an element once  and the CSS property will take care of maintaining that position for you every time you scroll

User · Answer

you re getting that poor transition because you re adjusting the position of the element every time the document is scrolled  What you want is to use fixed positioning  I tried that fixed center plugin listed above and that seems to do solve the problem nicely  Fixed positioning allows you to center an element once  and the CSS property will take care of maintaining that position for you every time you scroll

User · Answer

Lot s of ways to do this  My object is kept hidden with display none just inside the BODY tag so that positioning is relative to the BODY  After using     object id   show    I call     object id   center    I use position absolute because it is possible  especially on a small mobile device  that the modal window is larger than the device window  in which case some of the modal content could be inaccessible if positioning was fixed   Here s my flavor based on other s answers and my specific needs     fn center   function              this css  position   absolute               use   so that modal window will adjust with browser resizing         this css  top   50             this css  left   50                use negative margin to center         this css  margin-left   -1 this outerWidth   2     window  scrollLeft     px            this css  margin-top   -1 this outerHeight   2     window  scrollTop     px               catch cases where object would be offscreen         if this offset   top lt 0 this css   top   5px   margin-top   0             if this offset   left lt 0 this css   left   5px   margin-left   0              return this

User · Answer

Just say      divID   html       html     divID   html

User · Answer

Edit   If the question taught me anything  it s this  don t change something that already works     I m providing an  almost  verbatim copy of how this was handled on http   www jakpsatweb cz css css-vertical-center-solution html - it s heavily hacked for IE but provides a pure CSS way of answering the question    container  display table  height 100   position absolute  overflow hidden  width 100     helper      position absolute   top 50               display table-cell  vertical-align middle    content     position relative   top -50               margin 0 auto  width 200px  border 1px solid orange     Fiddle  http   jsfiddle net S9upd 4   I ve run this through browsershots and it seems fine  if for nothing else  I ll keep the original below so that margin percentage handling as dictated by CSS spec sees the light of day   Original   Looks like I m late to the party   There are some comments above that suggest this is a CSS question - separation of concerns and all  Let me preface this by saying that CSS really shot itself in the foot on this one  I mean  how easy would it be to do this    container       position absolute      left  50       top  50       overflow visible     content       position relative      margin -50  50  50  -50       Right  Container s top left corner would be in the center of the screen  and with negative margins the content will magically reappear in the absolute center of the page  http   jsfiddle net rJPPc   Wrong  Horizontal positioning is OK  but vertically    Oh  I see  Apparently in css  when setting top margins in    the value is calculated as a percentage always relative to the width of the containing block  Like apples and oranges  If you don t trust me or Mozilla doco  have a play with the fiddle above by adjusting content width and be amazed     Now  with CSS being my bread and butter  I was not about to give up  At the same time  I prefer things easy  so I ve borrowed the findings of a Czech CSS guru and made it into a working fiddle  Long story short  we create a table in which vertical-align is set to middle    lt table class  super-centered  gt  lt tr gt  lt td gt       lt div class  content  gt           lt p gt I am centered like a boss  lt  p gt       lt  div gt   lt  td gt  lt  tr gt  lt  table gt    And than the content s position is fine-tuned with good old margin 0 auto     super-centered  position absolute  width 100  height 100  vertical-align middle    content  margin 0 auto width 200px      Working fiddle as promised  http   jsfiddle net teDQ2

User · Answer

i use this     function            divId   css        left     50         top     50         position     absolute        margin-left    -    divId   outerWidth   2       margin-top    -    divId   outerHeight   2

User · Answer

Here s my go at it  I ended up using it for my Lightbox clone  The main advantage of this solution is that the element will stay centered automatically even if the window is resized making it ideal for this sort of usage     fn center   function         this css            position    fixed            left    50             top    50               this css            margin-left   -this outerWidth     2    px            margin-top   -this outerHeight     2    px               return this

User · Answer

No need jquery for this  I used this to center  Div element  Css Style    black overlay      display  none      position  absolute      top  0       left  0       width  100       height  100       background-color  black      z-index 1001      -moz-opacity  0 8      opacity  80      filter  alpha opacity 80       white content       display  none      position  absolute      top  25       left  25       width  50       height  50       padding  16px      border  16px solid orange      background-color  white      z-index 1002      overflow  auto      Open element    document  ready function            open   click function e             black overlay   fadeIn 200

User · Answer

I like adding functions to jQuery so this function would help   jQuery fn center   function          this css  position   absolute        this css  top   Math max 0      window  height   -   this  outerHeight      2                                                       window  scrollTop       px        this css  left   Math max 0      window  width   -   this  outerWidth      2                                                       window  scrollLeft       px        return this      Now we can just write     element  center      Demo  Fiddle  with added parameter

User · Answer

The transition component of this function worked really poorly for me in Chrome  didn t test elsewhere   I would resize the window a bunch and my element would sort of scoot around slowly  trying to catch up    So the following function comments that part out  In addition  I added parameters for passing in optional x  amp  y booleans  if you want to center vertically but not horizontally  for example      Center an element on the screen  function         fn extend       center  function  x y             var options      extend  transition 300  minX 0  minY 0   options         return this each function                     if  x    undefined                        x   true                                    if  y    undefined                        y   true                                    var  this     this                   var  window     window                    this css                       position   absolute                                       if  x                        var left     window width   -  this outerWidth    2  window scrollLeft                         this css  left  left                                    if   y    false                var top     window height   -  this outerHeight    2  window scrollTop                            this css  top  top                                  this  animate                top   top  gt  options minY   top   options minY   px                left   left  gt  options minX   left   options minX   px                options transition           return   this                            jQuery

User · Answer

MY UPDATE TO TONY L S ANSWER This is the modded version of his answer that I use religiously now  I thought I would share it  as it adds slightly more functionality to it for various situations you may have  such as different types of position or only wanting horizontal vertical centering rather than both    center js      We add a pos parameter so we can specify which position type we want     Center it both horizontally and vertically  dead center  jQuery fn center   function  pos        this css  position   pos       this css  top      window  height     2  -  this outerHeight     2        this css  left      window  width     2  -  this outerWidth     2        return this        Center it horizontally only jQuery fn centerHor   function  pos        this css  position   pos       this css  left      window  width     2  -  this outerWidth     2        return this        Center it vertically only jQuery fn centerVer   function  pos        this css  position   pos       this css  top      window  height     2  -  this outerHeight     2        return this      In my  lt head gt     lt script src  scripts center js  gt  lt  script gt    Examples of usage       example1   centerHor  absolute       example2   centerHor  fixed        example3   centerVer  absolute       example4   centerVer  fixed        example5   center  absolute       example6   center  fixed     It works with any positioning type  and can be used throughout your entire site easily  as well as easily portable to any other site you create  No more annoying workarounds for centering something properly    Hope this is useful for someone out there  Enjoy

User · Answer

This is untested  but something like this should work   var myElement       myElement    myElement css       position   absolute       left   50         margin-left   0 -  myElement width     2

User · Answer

Here is my version  I may change it after I look at these examples     fn pixels   function property       return parseInt this css property          fn center   function        var w      w       return this each function              this  css  position   absolute              this  css  top    w height   -   this  height      2  -     this  pixels  padding-top       this  pixels  padding-bottom      2    w scrollTop      px              this  css  left    w width   -   this  width      2  -     this  pixels  padding-left       this  pixels  padding-right      2    w scrollLeft      px

User · Answer

What I have here is a  center  method that ensures the element you are attempting to center is not only of  fixed  or  absolute  positioning  but it also ensures that the element you are centering is smaller than its parent  this centers and element relative to is parent  if the elements parent is smaller than the element itself  it will pillage up the DOM to the next parent  and center it relative to that        fn center   function                   lt summary gt Centers a Fixed or Absolute positioned element relative to its parent lt  summary gt           var element     this               elementPos   element css  position                elementParent     element parent                 elementWidth   element outerWidth                parentWidth   elementParent width             if  parentWidth  lt   elementWidth                elementParent     elementParent parent                 parentWidth   elementParent width                       if  elementPos      absolute     elementPos      fixed                 element css  right    parentWidth   2  - elementWidth   2    px

User · Answer

I like adding functions to jQuery so this function would help   jQuery fn center   function          this css  position   absolute        this css  top   Math max 0      window  height   -   this  outerHeight      2                                                       window  scrollTop       px        this css  left   Math max 0      window  width   -   this  outerWidth      2                                                       window  scrollLeft       px        return this      Now we can just write     element  center      Demo  Fiddle  with added parameter

User · Answer

To center the element relative to the browser viewport  window   don t use position  absolute  the correct position value should be fixed  absolute means   The element is positioned relative to its first positioned  not static  ancestor element      This alternative version of the proposed center plugin uses     instead of  px  so when you resize the window the content is keep centered     fn center   function          var heightRatio      window  height      0                 this outerHeight       window  height     1      var widthRatio      window  width      0                 this outerWidth       window  width     1       this css           position   fixed           margin  0          top   50  1-heightRatio                  left   50  1-widthRatio                       return this      You need to put margin  0 to exclude the content margins from the width height  since we are using position fixed  having margins makes no sense    According to the jQuery doc using  outerWidth true  should include margins  but it didn t work as expected when I tried in Chrome   The 50  1-ratio  comes from   Window Width  W   100   Element Width  in     w   100   elementWidthInPixels windowWidthInPixels  Them to calcule the centered left     left   W 2 - w 2   50 - 50   elementWidthInPixels windowWidthInPixels      50    1-elementWidthInPixels windowWidthInPixels

User · Answer

This is great   I added a callback function  center  function  options  callback        if  options transition  gt  0         this  animate props  options transition  callback     else          this  css props      if  typeof callback     function        make sure the callback is a function        callback call this      brings the scope to the callback

User · Answer

Normally  I would do this with CSS only    but since you asked you a way to do this with jQuery     The following code centers a div both horizontally and vertically inside its container     x000D   x000D      target   addClass  centered-content   x000D               wrap   lt div class  center-outer-container  gt  lt  div gt    x000D               wrap   lt div class  center-inner-container  gt  lt  div gt     x000D  body   x000D      margin   0  x000D      background   ccc  x000D    x000D   x000D   center-outer-container   x000D      position   absolute  x000D      display  table  x000D      width  100   x000D      height  100   x000D    x000D   x000D   center-inner-container   x000D      display  table-cell  x000D      vertical-align  middle  x000D      text-align  center  x000D    x000D   x000D   centered-content   x000D      display  inline-block  x000D      text-align  left  x000D      background   fff  x000D      padding   20px  x000D      border   1px solid  000  x000D    x000D   lt script type  text javascript  src  https   code jquery com jquery-1 12 1 min js  gt  lt  script gt  x000D   lt div id  target  gt Center this  lt  div gt  x000D   x000D   x000D     see also this Fiddle

User · Answer

Here s my go at it  I ended up using it for my Lightbox clone  The main advantage of this solution is that the element will stay centered automatically even if the window is resized making it ideal for this sort of usage     fn center   function         this css            position    fixed            left    50             top    50               this css            margin-left   -this outerWidth     2    px            margin-top   -this outerHeight     2    px               return this

User · Answer

I would like to correct one issue   this css  top       window  height   - this height       2   window  scrollTop      px      Above code won t work in cases when this height  lets assume that user resizes the screen and content is dynamic  and scrollTop     0  example    window height is 600 this height is 650  600 - 650   -50    -50   2   -25   Now the box is centered -25 offscreen

User · Answer

To center the element relative to the browser viewport  window   don t use position  absolute  the correct position value should be fixed  absolute means   The element is positioned relative to its first positioned  not static  ancestor element      This alternative version of the proposed center plugin uses     instead of  px  so when you resize the window the content is keep centered     fn center   function          var heightRatio      window  height      0                 this outerHeight       window  height     1      var widthRatio      window  width      0                 this outerWidth       window  width     1       this css           position   fixed           margin  0          top   50  1-heightRatio                  left   50  1-widthRatio                       return this      You need to put margin  0 to exclude the content margins from the width height  since we are using position fixed  having margins makes no sense    According to the jQuery doc using  outerWidth true  should include margins  but it didn t work as expected when I tried in Chrome   The 50  1-ratio  comes from   Window Width  W   100   Element Width  in     w   100   elementWidthInPixels windowWidthInPixels  Them to calcule the centered left     left   W 2 - w 2   50 - 50   elementWidthInPixels windowWidthInPixels      50    1-elementWidthInPixels windowWidthInPixels

User · Answer

What I have here is a  center  method that ensures the element you are attempting to center is not only of  fixed  or  absolute  positioning  but it also ensures that the element you are centering is smaller than its parent  this centers and element relative to is parent  if the elements parent is smaller than the element itself  it will pillage up the DOM to the next parent  and center it relative to that        fn center   function                   lt summary gt Centers a Fixed or Absolute positioned element relative to its parent lt  summary gt           var element     this               elementPos   element css  position                elementParent     element parent                 elementWidth   element outerWidth                parentWidth   elementParent width             if  parentWidth  lt   elementWidth                elementParent     elementParent parent                 parentWidth   elementParent width                       if  elementPos      absolute     elementPos      fixed                 element css  right    parentWidth   2  - elementWidth   2    px

User · Answer

I would like to correct one issue   this css  top       window  height   - this height       2   window  scrollTop      px      Above code won t work in cases when this height  lets assume that user resizes the screen and content is dynamic  and scrollTop     0  example    window height is 600 this height is 650  600 - 650   -50    -50   2   -25   Now the box is centered -25 offscreen

User · Answer

I would recommend jQueryUI Position utility     your-selector   position       of    window        which gives you much more possibilities than only centering

User · Answer

Edit   If the question taught me anything  it s this  don t change something that already works     I m providing an  almost  verbatim copy of how this was handled on http   www jakpsatweb cz css css-vertical-center-solution html - it s heavily hacked for IE but provides a pure CSS way of answering the question    container  display table  height 100   position absolute  overflow hidden  width 100     helper      position absolute   top 50               display table-cell  vertical-align middle    content     position relative   top -50               margin 0 auto  width 200px  border 1px solid orange     Fiddle  http   jsfiddle net S9upd 4   I ve run this through browsershots and it seems fine  if for nothing else  I ll keep the original below so that margin percentage handling as dictated by CSS spec sees the light of day   Original   Looks like I m late to the party   There are some comments above that suggest this is a CSS question - separation of concerns and all  Let me preface this by saying that CSS really shot itself in the foot on this one  I mean  how easy would it be to do this    container       position absolute      left  50       top  50       overflow visible     content       position relative      margin -50  50  50  -50       Right  Container s top left corner would be in the center of the screen  and with negative margins the content will magically reappear in the absolute center of the page  http   jsfiddle net rJPPc   Wrong  Horizontal positioning is OK  but vertically    Oh  I see  Apparently in css  when setting top margins in    the value is calculated as a percentage always relative to the width of the containing block  Like apples and oranges  If you don t trust me or Mozilla doco  have a play with the fiddle above by adjusting content width and be amazed     Now  with CSS being my bread and butter  I was not about to give up  At the same time  I prefer things easy  so I ve borrowed the findings of a Czech CSS guru and made it into a working fiddle  Long story short  we create a table in which vertical-align is set to middle    lt table class  super-centered  gt  lt tr gt  lt td gt       lt div class  content  gt           lt p gt I am centered like a boss  lt  p gt       lt  div gt   lt  td gt  lt  tr gt  lt  table gt    And than the content s position is fine-tuned with good old margin 0 auto     super-centered  position absolute  width 100  height 100  vertical-align middle    content  margin 0 auto width 200px      Working fiddle as promised  http   jsfiddle net teDQ2

[javascript] Using jQuery to center a DIV on the screen

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to layout