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

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

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

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

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

Вот мое предположение:

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

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

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

Примечание : это на самом деле не имеет ничего общего с Bootstrap или технологии glyphicons. Чтобы избежать зависимости от bootstrap, мы добавим 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 имеет что-то для позиционирования справа от get go, и вам не нужно использовать toggle в JavaScript.

---

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

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

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

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

Решение в jsFiddle