css - absolute position from top, horizontally centered div

captainandcoke picture captainandcoke · May 11, 2011 · Viewed 21.1k times · Source

I've looked at a googol google results without finding any that work.

I need to have my div (height 333 px, width 550 px) to be centered horizontally and always be 275 px from the top. Every time I try to do this it just disappears.

Answer

fuxia picture fuxia · May 11, 2011

If the div should sit on top you have to use position:absolute. Otherwise, the answer from @sdleihssirhc should work.

Example with positioning

#middlebox
{
    position:    absolute;
    top:         275px;
    left:        50%;    /* move the left edge to the center … */
    margin-left: -275px; /* … and move it to the left half the box’ width. */
    z-index:     9999;   /* Try to get it on top. */
}

Use tools like Dragonfly or Firebug to inspect the properties if it still disappears.