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