Search code examples
htmlcssposition

left:50% element not appearing in middle of page

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.

Solution

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