<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,检查元素,并关闭/在前50％的规则,它突然工作.怎么来的？
解决方法
根据MDN on top：
For relatively positioned elements (those with
position: relative),it specifies the amount the element is moved below its normal position.
Note: Percentage is applied as a percentage of the height of the element’s containing block
根据W3 on top：
For relatively positioned Boxes,the offset is with respect to the top edges of the Box itself (i.e.,the Box is given a position in the normal flow,then offset from that position according to these properties).
Note: Percentages refer to height of containing block
这是我的猜测：
我认为发生的是,当browser is first rendering the visual tree,并看到顶部：50％;它看起来要父母设置高度.由于没有特别应用高度,并且没有加载任何子内容,所以div(和所有div)的高度有效地开始为零直到另外指出.然后,将字形按下50％的零.
当您稍后切换属性时,浏览器已经呈现所有内容,因此父容器的计算高度由其子级的高度提供.
最小,完整和可验证的例子
注意：这与Bootstrap或Glyphicons没有任何关系.为了避免依赖引导,我们将添加将由.glyphicon类应用的top：1px.即使被50％的覆盖,仍然起着重要的作用.
这是一组简单的父/子元素：
<div id="container">
<div id="child">Child</div>
</div>
为了模拟以更可重复的方式切换属性,我们可以等待两秒钟,然后在JavaScript中应用一个样式,如下所示：
window.setTimeout(function() {
document.getElementById("child").style.top = '50%';
},2000);
示例1：
作为起点,让我们重新创建你的问题.
#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
如果您添加顶部：50％的子元素,当JavaScript添加属性时,将不会发生任何事情,因为它不会有任何要覆盖的东西.
实施例3
如果您添加顶部：49％的子元素,那么DOM确实有更新的东西,所以我们会再次遇到奇怪的故障.
实施例4
如果添加height：50px;到容器,而不是孩子,那么顶级属性有一些位置反对,而不需要在JavaScript中使用切换.
如何垂直对齐
如果您只想知道如何垂直居中的东西,那么您可以执行以下操作：
将文本垂直居中的方法是将line-height设置为与容器高度相等.如果一行占用100像素,并且文本行在线占用10,则浏览器将尝试将文本居中在剩余的90个像素中,顶部和底部为45.
.glyphicon-large {
min-height: 260px;
line-height: 260px;
}
