Идеальное решение для вертикального центрирования по вертикали?

Question

Короткий и безболезненный, я пробовал много способов получить элемент, например. info text, абсолютно центрированный (H/V) без с использованием divs, Javascript, jQuery или вообще.

Проблема не в том, чтобы это сработало, и есть много разных способов, но я теряю свои волосы, пытаясь сделать его совместимым с кросс-браузером. И это должно быть так просто.

Например, в следующем сценарии FF21 интерпретирует маржу сверху 50% как 100% без логической причины. (Мобильные устройства, однако, не работают).

Я использую <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />

Соответствующий CSS:

body { 
    margin: 50% 0 0; 
    padding: 0; 
    border: 0; 
    display: block; 
    vertical-align: middle; /* removing this made no real difference at all */ 
    font-family: Helvetica, Arial, MS Sans Serif; 
    font-size: 11pt; 
    text-align:center; 
    background-color: rgb(10, 50, 100); 
    color: #ddd; 
} 

Примечания:

• В Firefox, ожидаемая вертикальная центровка устанавливается с запасом верхом на 25% (что выглядит неправильно в мобильных браузерах, затем снова).
• Использование HTML5
• Попытка ИЗБЕЖАТЬ любой форме сценария и предвычисленных, отрицательных полей. Предполагается, что браузер настроен должным образом, как вы его просите.

JS-Fiddle: http://jsfiddle.net/sfaVg/

Answer 1

Без элемента, содержащего текст, я сомневаюсь, что вы сможете расположить его мертвым, как вы хотите. Как только вы напишете правильную разметку (поместите абзац в <p>, где он принадлежит, например), это вполне возможно, но со следующим css;

p { 
    display: table-cell; 
    vertical-align: middle; 
    text-align:center; 
} 

Также убедитесь, что его емкость (body в вашем случае) получает дисплей: стол; и 100% ширина/высота

Демонстрация на http://jsfiddle.net/sfaVg/3/

Кроме того, метод бонусная альтернативы (требуется два контейнера) можно найти по адресу http://zoffix.com/new/absolute-center-random-width-height.html

Третье решение, когда вы знаете размеры, что вы 're centering: http://reisio.com/examples/deadcenter/