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?

<

Answer 1

If you have set a width you may use:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

Answer 2

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.

Answer 3

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.

1. Surround your image with a div or other tag (in your case a li).

   <div class="absolute-div">
     <img alt="my-image" src="#">
   </div>
   

   Note: The names given to these elements are not special.

2. 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:

body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  width   : auto;
  // This sets the width relative to your set height.

  // Setting a width is required for the margin auto attribute below. 

  margin  : 0 auto;
}

<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>

I hope this was helpful. Good luck!

Answer 4

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

see demo on: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; works with a position: absolute element when adding left: 0; right: 0;

Answer 5

probably the shortest

position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;

Answer 6

Without knowing the width/height of the positioned¹ 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.}