Search code examples
htmlcsspositioningcentervertical-alignment

Vertical centering using negative margins, works in Safari but not in Firefox/Chrome, any ideas?

I've been searching to find someone who has had a similar problem to me:

http://dominicburton.co.uk/soas/

The website I'm working on renders fine in Safari but not in Chrome or Firefox.

Firefox sees the style but only renders the negative top margin not the top:50%.

#wrapper {
margin-top: -245px;
position: relative;
top: 50%;
}

Does anyone know why this is happening? I've pretty much run out of ideas...

Solution

  • You need to use absolute positioning, add a height and margin should be half the height negated. Check it out here http://jsfiddle.net/CYKwM/

    #wrapper {
    height:490px; /* you need to specify a height*/
    width:490px;
    margin-top: -245px; /*negative half the height*/
    position: absolute; /*change to absolute*/
    top: 50%;
    background:red;
}