我有一个像这样的字形图标：
<div class="col-xs-4 col-sm-2">
<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large"></span>
</div>
.glyphicon-large {
min-height: 260px;
font-size: 35px;
width: 1em;
display: block;
top: 50%;
margin: -0.5em auto 0px;
}
字形图标不会垂直对齐到中心。当我打开 Firefox、检查元素并关闭/打开 top 50% 规则时，它突然起作用了。怎么会？
【问题讨论】：
标签： css twitter-bootstrap twitter-bootstrap-3 glyphicons
top：对于相对定位的元素（带有
position: relative的元素），它指定元素在其正常位置下方移动的量。
注意：百分比应用为元素包含块高度的百分比
top：对于相对定位的盒子，偏移量是相对于盒子本身的顶部边缘的（即，盒子在正常流程中被赋予一个位置，然后根据这些从该位置偏移特性）。 注意：百分比是指包含块的高度
我认为正在发生的事情是，当browser is first rendering the visual tree 看到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);
作为起点，让我们重新创建您的问题。
#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;
}
请注意，一旦您调整窗口大小，浏览器就会重新绘制屏幕并将元素移回顶部。
如果您将top: 50% 添加到子元素，则在javascript 添加该属性时不会发生任何事情，因为它不会有任何内容可以覆盖。
如果您将top: 49% 添加到子元素，那么 DOM 确实需要更新一些东西，所以我们会再次遇到奇怪的故障。
如果您将 height: 50px; 添加到容器而不是子容器中，那么 top 属性从一开始就可以定位，您无需在 JavaScript 中使用切换。
如果您只是想知道如何始终如一地垂直居中，那么您可以执行以下操作：
将文本垂直居中的技巧是将line-height 设置为等于容器高度。如果一行占 100 像素，而在线文本占 10 像素，那么浏览器将尝试将文本居中在剩余的 90 像素内，顶部和底部分别为 45。
.glyphicon-large {
min-height: 260px;
line-height: 260px;
}
【讨论】：
top 与relative 一起使用。它可能不会做你期望它做的事情，但实际上它已经明确定义了它应该做什么并且它确实做到了。
position: relative 和top: % 的解释更新了答案
尝试将 H1 标记内的字形图标居中，这需要一段时间 - 所以我发现您实际上可以更改包含字形的 SPAN 标记内的字体大小和颜色。
因此：
<h1><span class="glyphicon glyphicon-envelope" style="font-size: 24px; color: #108db7;"></span> Mes Messages</h1>
确实适合我。
【讨论】：
你试过了吗？ ：
<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large" style="vertical-align:middle"></span>
【讨论】：
top: 50% 属性后确实可以工作。 （@Ricoxor）