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)
}

Answer 4

Your code is working correctly. The popup is being positioned with left of 50% ... of the TD tag it's nested inside.

Try either taking the popup out of the table, or setting it to 50% of the document width instead. (Your javascript is minified and unreadable to me, or I'd help further.)

Answer 5

u can try to change CSS Style like this

#displayDiv {
    background-color: white;
    font-weight: bold;
    height: 460px;
    left: 50%;
    margin: auto auto auto -475px;/* change done here */
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 80px;
    width: 950px;
    z-index: 1;
}

Answer 6

Looks to me like there's a containing element somewhere in between the "Ice White" image and the body (specifically, Firebug reveals that it's the <a class="popup1" ... > ) that is relatively positioned, so your 50% is relative to that rather than the whole page.

I know this seems a bit counterintuitive: Why should it be relative to a parent element if the poput uses absolute positioning? It's basically because relative positioning is relative to where the element is in the normal flow of the document, whereas absolute positioning yanks the element out of that flow. See sections 9.4.3 and 9.6 of the W3C's explanation of the visual formatting model for more info.

Check out a tutorial or two if this is giving you trouble. I like Learn CSS Positioning in Ten Steps and css-tricks.com's "Absolute Positioning Inside Relative Positioning" (to which I'd provide a link if not for the spam filter; first-time answerer here ;) ).

As for what to do about it, you might be able to move the popups out of the relatively positioned parent, as mblaze75 suggests, but it looks (and I'm guessing here) like that <a> is what's triggering your JavaScript event, so you probably can't do that. Instead, I'd try removing the relative positioning and using margins instead.

Also, bear in mind what Greg Agnew said: Even with that problem solved, you're still centering the left edge rather than the center of your popup. I think duri's answer will take care of that.