Ответ 1

Объяснение ошибки браузера

Согласно MDN на top:

Для относительно позиционированных элементов (те, у которых position: relative), определяется количество, которое элемент перемещается ниже его нормального положения.
Примечание. Процент применяется в процентах от высоты элемента, содержащего блок

Согласно W3 на top:

Для относительно позиционированных коробок смещение относится к верхним краям самого блока (то есть коробке задано положение в нормальном потоке, а затем смещается от этой позиции в соответствии с этими свойствами). Примечание. Проценты относятся к высоте содержащего блока

Здесь моя догадка:

Я думаю, что происходит, когда браузер сначала визуализирует визуальное дерево и видит top:50%;, он смотрит на родителя для установки высоты. Поскольку высота не была специально применена, и она не загрузила никакого дочернего содержимого, высота этого div (и всех div) эффективно начинается с нуля, пока не будет указано иначе. Затем он сдвигает глиф на 50% от нуля.

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

Минимальный, полный и проверяемый пример

Примечание. Это не имеет ничего общего с Bootstrap или Glyphicons. Чтобы избежать зависимости от бутстрапа, добавим top: 1px, который был бы применен классом .glyphicon. Несмотря на то, что он перезаписывается 50%, он по-прежнему играет важную роль.

Вот простой набор родительских/дочерних элементов:

<div id="container">
    <div id="child">Child</div>
</div>

Чтобы имитировать переключение свойства более воспроизводимым образом, мы можем подождать две секунды, а затем применить стиль в javascript следующим образом:

window.setTimeout(function() {
    document.getElementById("child").style.top = '50%';
},2000);

Пример 1 (jsFiddle)

В качестве отправной точки воссоздайте свою проблему.

#container {
    position: relative;

    /* For Visual Effects */
    border: 1px solid grey;
}
#child {
    position: relative;
    height: 50px;
    top: 1px;

    /* For Visual Effects */
    border: 1px solid orange;
    width: 50px;
    margin: 0px auto;

}

Обратите внимание, что как только вы измените размер окна, браузер перекрасит экран и вернет элемент вверх.

Пример 2 (jsFiddle)

Если вы добавите top: 50% к дочернему элементу, ничего не произойдет, когда javascript добавит свойство, потому что ему нечего перезаписать.

Пример 3 (jsFiddle)

Если вы добавите top: 49% к дочернему элементу, то DOM действительно что-то обновит, чтобы снова получить странный сбой.

Пример 4 (jsFiddle)

Если вы добавляете height: 50px; в контейнер вместо дочернего элемента, то свойство top имеет что-то, что можно позиционировать прямо с самого начала, и вам не нужно использовать переключатель в JavaScript.

Как вертикально выравнивать

Если вы просто хотели бы знать, как вертикально центрировать что-то последовательно, вы можете сделать следующее:

Уловкой для вертикального центрирования текста является установка line-height, равная высоте контейнера. Если линия занимает 100 пикселей, а линия текста в Интернете занимает 10, тогда браузеры будут пытаться центрировать текст в пределах оставшихся 90 пикселей, а 45 - сверху и снизу.

.glyphicon-large {
    min-height:  260px;
    line-height: 260px;
}

Решение в jsFiddle

Ответ 2

Пробовал центрирование значка глифа, который находился внутри тега H1, который занимал некоторое время, поэтому я обнаружил, что вы действительно можете изменить размер шрифта и цвет внутри тега SPAN, связанного с глифом.

Таким образом:

<h1><span class="glyphicon glyphicon-envelope" style="font-size: 24px; color: #108db7;"></span>&nbsp;Mes Messages</h1>

действительно сработал у меня.

Ответ 3

Вы пробовали?

<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large" style="vertical-align:middle"></span>