浏览器错误说明
根据MDN on top https://developer.mozilla.org/en-US/docs/Web/CSS/top:
For 相对定位的元素（那些有position: relative), it 指定元素移动到其正常位置以下的量.
Note：百分比应用为元素包含块的高度的百分比
根据W3 on top http://www.w3.org/TR/CSS2/visuren.html#propdef-top:
For 相对定位盒子，偏移量是相对于盒子本身的顶部边缘的（即，盒子在正常流中被赋予一个位置，然后根据这些属性从该位置偏移）。Note：百分比指的是包含块的高度
这是我的猜测：
我认为正在发生的事情是当浏览器首先渲染视觉树 http://taligarsiel.com/Projects/howbrowserswork1.htm，并看到top:50%;，它会要求父级设置高度。由于没有专门应用高度，并且没有加载任何子内容，因此该 div（以及所有 div）的高度有效从零开始除非另有说明。然后它将字形下推零的 50%。
当您稍后切换属性时，浏览器已经渲染了所有内容，因此父容器的计算高度由其子容器的高度提供。
最小、完整且可验证的示例
Note：这与 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 http://jsfiddle.net/KyleMit/tu9mpyeg/)
作为起点，让我们重新创建您的问题。
#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 http://jsfiddle.net/KyleMit/tu9mpyeg/11/)
如果你添加top: 50%对于子元素，当 javascript 添加属性时不会发生任何事情，因为它没有任何内容可以覆盖。
示例3（jsFiddle http://jsfiddle.net/KyleMit/tu9mpyeg/12/)
如果你添加top: 49%到子元素，那么 DOM 确实有一些东西需要更新，所以我们会再次遇到奇怪的故障。
实施例4（jsFiddle http://jsfiddle.net/KyleMit/tu9mpyeg/14/)
如果你添加height: 50px;到容器而不是孩子，然后top属性从一开始就需要定位，并且您不需要在 JavaScript 中使用切换。
如何垂直对齐
如果您只是想知道如何使某些内容一致地垂直居中，那么您可以执行以下操作：
垂直居中文本的技巧是设置line-height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height等于容器高度。如果一行占用 100 个像素，而在线文本行占用 10 个像素，那么浏览器将尝试将文本在剩余的 90 个像素内居中，顶部和底部各 45 个像素。
.glyphicon-large {
min-height: 260px;
line-height: 260px;
}
jsFiddle中的解决方案 http://jsfiddle.net/KyleMit/Z9ZFr/
