left:50% element not appearing in middle of page

Question

I have an absolute positioned popup (hover over "ice white" image to see popup) which has css left:50%. Now this should appear in the middle of page but doesn't. Any suggestions please? Thanks in advance.

Answer 1

You're also supposed to add margin-left with the negative of a half of visible width of the element. So, for example:

width: 400px;
padding: 10px;
border-width: 2px;
/* -(400 + 10 + 2)/2 = -206 */
margin-left: -206px;
left: 50%;

Note that margin: auto suggested by others won't work because you've positioned the element absolutely.

Answer 2

Lol, no. The left side of the image appears at 50% of the page width. Hence; left: 50%.

In order to center your image, set margin: auto instead.

Answer 3

.div {
 position:absolute;
 left:50%;
 transform:translate(-50%,0)
}