How to center a position absolute element

Question

I m having a problem centering an element that has the attribute position set to absolute  Does anyone know why the images are not centered   x000D   x000D  body     text-align  center      slideshowWrapper     margin-top  50px    text-align  center     ul slideshow     list-style  none    position  relative    margin  auto     ul slideshow li     position  absolute     ul slideshow li img     border  1px solid  ccc    padding  4px    height  450px    x000D   lt body gt     lt div id  slideshowWrapper  gt       lt ul id  slideshow  gt         lt li gt  lt img src  https   source unsplash com random 300 300 technology  alt  Dummy 1    gt  lt  li gt         lt li gt  lt img src  https   source unsplash com random 301 301 technology  alt  Dummy 2    gt  lt  li gt       lt  ul gt     lt  div gt   lt  body gt  x000D   x000D   x000D

User · Answer

Here is easy and best solution for center element with “position: absolute”

_x000D_

 body,html{_x000D_
  min-height:100%;_x000D_
 }_x000D_
 _x000D_
 div.center{_x000D_
 width:200px;_x000D_
 left:50%;_x000D_
 margin-left:-100px;/*this is 50% value for width of the element*/_x000D_
 position:absolute;_x000D_
 background:#ddd;_x000D_
 border:1px solid #999;_x000D_
 height:100px;_x000D_
 text-align:center_x000D_
 }_x000D_
 _x000D_

_x000D_

<style>_x000D_
_x000D_
</style>_x000D_
_x000D_
<body>_x000D_
 <div class='center'>_x000D_
  should be centered verticaly_x000D_
 </div>_x000D_
</body>

_x000D_

User · Answer

Centering something absolutely positioned is rather convoluted in CSS   ul slideshow li       position  absolute      left 50       margin-left -20px       Change margin-left to  negative  half the width of the element you are trying to center

User · Answer

lt div class  centered content  gt  content  lt  div gt       lt style type  text css  gt       centered content          text-align  center         position  absolute         left  0         right  0             lt  style gt    see demo on  http   jsfiddle net MohammadDayeh HrZLC    text-align  center  works with a position  absolute element when adding left  0  right  0

User · Answer

Without knowing the width height of the positioned1 element  it is still possible to align it as follows   EXAMPLE HERE   child       position  absolute      top  50       position the top  edge of the element at the middle of the parent        left  50      position the left edge of the element at the middle of the parent         transform  translate -50   -50       This is a shorthand of                                          translateX -50   and translateY -50          It s worth noting that CSS Transform is supported in IE9 and above   Vendor prefixes omitted for brevity     Explanation  Adding top left of 50  moves the top left margin edge of the element to the middle of the parent  and translate   function with the  negative  value of -50  moves the element by the half of its size  Hence the element will be positioned at the middle   This is because a percentage value on top left properties is relative to the height width of the parent element  which is creating a containing block    While a percentage value on translate   transform function is relative to width height of the element itself  Actually it refers to the size of bounding box    For unidirectional alignment  go with translateX -50   or translateY -50   instead     1  An element with a position other than static  I e  relative  absolute  fixed values

User · Answer

What seems to be happening is there are two solutions  centered using margins and centered using position  Both work fine  but if you want to absolute position an element relative to this centered element  you need to use the absolute position method  because the absolute position of the second element defaults to the first parent that is positioned  Like so    lt  -- CENTERED USING MARGIN -- gt   lt div style  width 300px  height 100px  border  1px solid  000  margin 20px auto  text- align center   gt       lt p style  line-height 4   gt width  300 px  margin  0 auto lt  p gt       lt div style  position absolute  width 100px  height 100px  background-color  ff0000  top -20px  left 0px   gt           lt p style  line-height 4   gt Absolute lt  p gt       lt  div gt   lt  div gt    lt  -- CENTERED USING POSITION -- gt   lt div style  position absolute  left 50   width 300px  height 100px  border  1px solid  000  margin 20px 0 20px -150px  text-align center   gt       lt p style  line-height 2   gt width 300px  position  absolute  left  50   margin-left -150px  lt  p gt       lt div style  position absolute  width 100px  height 100px  background-color  ff0000  top 0px  left -105px   gt           lt p style  line-height 4   gt Absolute lt  p gt       lt  div gt   lt  div gt    Until I d read this posting  using the margin 0 auto technique  to build a menu to the left of my content I had to build a same-width column to the right to balance it out  Not pretty  Thanks

User · Answer

If you have set a width you may use   position  absolute  margin-left  auto  margin-right  auto  left  0  right  0  text-align  center

User · Answer

This worked for me   position  absolute  left  50   transform  translateX -50

User · Answer

probably the shortest  position absolute  left 0 right 0 top 0 bottom 0  margin 0 auto

User · Answer

Using  left  calc 50  - Wpx 2   where W is the width of the element works for me

User · Answer

x000D   x000D  html  body  ul  li  img   x000D    box-sizing  border-box  x000D    margin  0px    x000D    padding  0px    x000D    x000D   x000D   slideshowWrapper   x000D    width  25rem  x000D    height  auto  x000D    position  relative  x000D     x000D    margin-top  50px  x000D    border  3px solid black  x000D    x000D   x000D  ul   x000D    list-style  none  x000D    border  3px solid blue    x000D    x000D   x000D  li   x000D       center horizontal    x000D    position  relative  x000D    left  0  x000D    top  50   x000D    width  100   x000D    text-align  center  x000D    font-size  18px  x000D       center horizontal    x000D     x000D    border  3px solid red   x000D    x000D   x000D  img   x000D    border  1px solid  ccc  x000D    padding  4px  x000D      width  200px  x000D    height  100px  x000D    x000D   lt body gt  x000D     lt div id  slideshowWrapper  gt  x000D       lt ul id  slideshow  gt  x000D         lt li gt  lt img src  http   via placeholder com 350x150  alt  Dummy 1    gt  lt  li gt  x000D         lt li gt  lt img src  http   via placeholder com 140x100  alt  Dummy 2    gt  lt  li gt  x000D         lt li gt  lt img src  http   via placeholder com 200x100  alt  Dummy 3    gt  lt  li gt        x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

A simple CSS trick  just add   width  100   text-align  center    This works on both images and text

User · Answer

Or you can now use flex box with postion absolute     parent       position  relative      display  flex      justify-content  center      child       position  absolute

User · Answer

parent       position   relative      height  0      overflow  hidden      padding-bottom  56 25     images with aspect ratio  16 9        img        height  auto important      width  auto important      min-height  100       min-width  100       position  absolute      display  block                 top  -9999px      bottom  -9999px      left  -9999px      right  -9999px      margin  auto      I don t remember where I saw the centering method listed above  using negative top  right  bottom  left values  For me  this tehnique is the best  in most situations   When I use the combination from above  the image behaves like a background-image with the following settings   background-position  50  50   background-repeat  no-repeat  background-size  cover    More details about the first example can be found here  Maintain the aspect ratio of a div with CSS

User · Answer

An absolute object inside a relative object is relative to its parent  the problem here is that you need  a static width for the container  slideshowWrapper   and the rest of the solution is like the other users says  body       text-align  center      slideshowWrapper       margin-top  50px      text-align center      width  500px     ul slideshow       list-style  none      position  relative      margin  auto     ul slideshow li       position  relative      left  50      ul slideshow li img       border  1px solid  ccc      padding  4px      height  450px      http   jsfiddle net ejRTU 10

User · Answer

Position absolute takes it out of the flow  and places it at 0x0 to the parent   Last block element to have a position absolute or position relative     I m not sure what exactly you what you are trying to accomplish  It might be best to set the li to a position relative and that will center them  Given your current CSS  Check out http   jsfiddle net rtgibbons ejRTU  to play with it

User · Answer

You can try this way     x000D   x000D      margin  0px  padding  0px    x000D   body   height  100vh  width  100vw  position  relative   x000D          text-align  center   x000D          background-image  url  https   s-media-cache-ak0 pinimg com originals 96 2d ff 962dff2247ad680c542622e20f44a645 jpg     x000D           background-size  cover  background-repeat  no-repeat    x000D   text   position  absolute  top  0  bottom  0  left  0  right  0  height 100px   x000D          display  inline-block  margin  auto  z-index  999999    x000D   lt html gt  x000D   lt body gt  x000D    lt div id  body  class  container-fluid  gt  x000D      lt  --Background-- gt  x000D        lt  --Text-- gt  x000D       lt div class  text  gt  x000D         lt p gt Random lt  p gt  x000D       lt  div gt     x000D    lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Just use display  flex and justify-content  center on the parent element  x000D   x000D  body       text-align  center      slideshowWrapper       margin-top  50px      text-align  center     ul slideshow       list-style  none      position  relative      margin  auto      display  flex      justify-content  center     ul slideshow li       position  absolute     ul slideshow li img       border  1px solid  ccc      padding  4px      height  100px    x000D   lt body gt      lt div id  slideshowWrapper  gt         lt ul id  slideshow  gt            lt li gt  lt img src  https   source unsplash com random 300 300 technology  alt  Dummy 1    gt  lt  li gt            lt li gt  lt img src  https   source unsplash com random 301 301 technology  alt  Dummy 2    gt  lt  li gt         lt  ul gt      lt  div gt   lt  body gt    lt  -- Images from Unsplash-- gt  x000D   x000D   x000D    You can find this solution in JSFIDDLE

User · Answer

To center a    position  absolute    element    your-element     position  absolute    left  0    right  0    text-align  center     or this - gt   margin  0 auto

User · Answer

Your images are not centered because your list items are not centered  only their text is centered  You can achieve the positioning you want by either centering the entire list or centering the images within the list    A revised version of your code can be found at the bottom  In my revision I center both the list and the images within it   The truth is you cannot center an element that has a position set to absolute   But this behavior can be imitated   Note  These instructions will work with any DOM block element  not just img    Surround your image with a div or other tag  in your case a li     lt div class  absolute-div  gt     lt img alt  my-image  src     gt   lt  div gt    Note  The names given to these elements are not special  Alter your css or scss to give the div absolute positioning and your image centered    absolute-div     position  absolute     width  100         Range to be centered over         If this element s parent is the body then 100    the window s width       Note  You can apply additional top bottom and left right attributes      i e  - top  200px  left  200px        Test for desired positioning      absolute-div img     width  500px       Note  Setting a width is crucial for margin  auto to work     margin  0 auto       And there you have it  Your img should be centered   Your code   Try this out    x000D   x000D  body x000D    x000D    text-align   center  x000D    x000D   x000D   slideshow x000D    x000D    list-style   none  x000D    width        800px  x000D       alter to taste x000D   x000D    margin       50px auto 0  x000D    x000D   x000D   slideshow li x000D    x000D    position   absolute  x000D    x000D   x000D   slideshow img x000D    x000D    border    1px solid  CCC  x000D    padding   4px  x000D    height    500px  x000D    width     auto  x000D       This sets the width relative to your set height  x000D   x000D       Setting a width is required for the margin auto attribute below   x000D   x000D    margin    0 auto  x000D    x000D   lt ul id  slideshow  gt  x000D       lt li gt  lt img src  http   lorempixel com 500 500 nature   alt  Dummy 1    gt  lt  li gt  x000D       lt li gt  lt img src  http   lorempixel com 500 500 nature   alt  Dummy 2    gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    I hope this was helpful  Good luck

User · Answer

Use margin-left  x   where x is the half of the width of the element

User · Answer

If you don t know the width of the element you can use this code    lt body gt   lt div style  position  absolute  left  50    gt       lt div style  position  relative  left  -50   border  dotted red 1px   gt          I am some centered shrink-to-fit content   lt br   gt          tum te tum      lt  div gt   lt  div gt      Demo at fiddle  http   jsfiddle net wrh7a21r   Source  https   stackoverflow com a 1777282 1136132

User · Answer

The simpler  the best   img               top  0              bottom  0              left  0              right  0              margin  auto auto              position  absolute      Then you need to insert your img tag into a tag that sports position relative property  as follows    lt div style  width 256px  height  256px  position relative   gt         lt img src  photo jpg   gt   lt  div gt

User · Answer

I m not sure what you want to accomplish  but in this case just adding width  100   to your ul slideshow li will do the trick   Explanation  The img tags are inline-block elements  This means that they flow inline like text  but also have a width and height like block elements  In your css there are two text-align  center  rules applied to the  lt body gt  and to the  slideshowWrapper  which is redundant btw  this makes all inline and inline-block child elements to be centered in their closest block elements  in your code these are li tags  All block elements have width  100  if they are the static flow  position  static    which is default  The problem is that when you tell li tags to be position  absolute   you take them out of normal static flow  and this causes them to shrink their size to just fit their inner content  in other words they kind of  lose  their width  100  property

User · Answer

to center a a position absolute attribute you need to set left 50  and margin-left  -50  of the width of the div    lt  -- for horizontal -- gt   lt style gt  div center   width 200px   left 50    margin-left -100px   position absolute     lt  style gt     lt body gt    lt div class  center  gt    should be centered horizontaly   lt  div gt   lt  body gt    for vertical center absolute you need to do the same thing bud not with left just with top    NOTE  html and body must have min-height 100       lt  -- for vertical -- gt   lt style gt   body html    min-height 100       div center    height 200px    top 50     margin-top -100px    position absolute      lt  style gt    lt body gt    lt div class  center  gt    should be centered verticaly   lt  div gt   lt  body gt    and can be combined for both      lt  -- for both -- gt    lt style gt   body html    min-height 100       div center    width 200px    height 50px   left 50     top 50     margin-left -100px    margin-top -25px    position absolute      lt  style gt     lt body gt    lt div class  center  gt    should be centered   lt  div gt   lt  body gt

User · Answer

Div vertically and horizontally aligned center   top  0  bottom  0  margin  auto  position  absolute  left  0  right  0    Note   Elements should have width and height to be set

User · Answer

If you want to center an absolute element   div       position absolute      top 0      bottom 0      left 0      right 0      width 300px     Assign a value        height 500px     Assign a value        margin auto      If you want a container to be centered left to right  but not with top to bottom   div       position absolute      left 0      right 0      width 300px     Assign a value        height 500px     Assign a value        margin auto      If you want a container to be centered top to bottom  regardless of being left to right   div       position absolute      top 0      bottom 0      width 300px     Assign a value        height 500px     Assign a value        margin auto      Update as of December 15  2015  Well I learnt this another new trick few months ago  Assuming that you have a relative parent element   Here goes your absolute element    absolute-element        position absolute       top 50        left 50        transform translate -50   -50         width 50      You can specify ANY width values here         With this  I think it s a better answer than my old solution  Since you don t have to specify width AND height  This one it adapts the content of the element itself

[html] How to center a "position: absolute" element

Examples related to html

Examples related to css

Examples related to css-position

Examples related to centering