Ответ 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;
}