Вертикальное центрирование с использованием отрицательных полей работает в Safari, но не в Firefox / Chrome, есть идеи?

Question

Я искал, чтобы найти кого-то, у кого была похожая проблема:

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

Веб-сайт, над которым я работаю, прекрасно работает в Safari, но не в Chromeили Firefox.

Firefox видит стиль, но отображает только отрицательное верхнее поле, а не верхнее: 50%.

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

Кто-нибудь знает, почему это происходит?У меня почти не осталось идей ...

Answer 1

Вам нужно использовать абсолютное позиционирование, добавить высоту, а поле должно быть вдвое меньше высоты. Проверьте это здесь 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;
}

Answer 2

Демонстрация выравнивания по вертикали

CSS

#wrapper {height:490px;
margin-top: -245px; /* Negative Half Height */
position: absolute;
top: 50%;
}

Источник

Это должно быть относительно легко реализовать, ваш макет DIV в основном на 100%,

PS приятный дизайнер!