 at work the other day i was working on the homepage of a small save the date site we had so many beautiful images to use so our designer decided to limit the text that is on the homepage so the container is absolutely positioned with a height of 100% in order to fill the viewport the client wrote back right before we were ready to launch and said that they noticed a large white margin on the right hand side we had to explain to them that since the design was left aligned and the picture cant go on forever there has to be an end to the design we decided to center the design in order to make it look better so i went in and added margin 0 auto like i normally would to center anything but then i realized since it is absolutely positioned it wouldt work like that how to center the absolute positioned item after doing some thinking i thought about positioning the item from the left edge a certain percent so i thought if i moved it over 50% and then shifted it back to the right then it should work example here is the css that i started with div centered height 300px left 50% position absolute top 20px width 500px ok so now weve got it shifted over 50% from the left hand side and in order to get it back to the center you need to take half of the width of the item in this case 250px so if we set a negative left margin of 250px we end up with the following css div centered height 300px left 50% margin left 250px position absolute top 20px width 500px you can see that the absolutely positioned item is now centered in case you didnt notice i alphabetize my css properties it makes everything so much easier to maintain once you actually start to think about it it pretty much comes naturally too give it a shot 