Html 为什么div中的div不'；t位置在适当的范围内

在我使用margintop:50%时，它仍然没有很好地封装在它的祖先div中，我希望它将水平放置在中间

HTML 箱

css

---

您的边距值是使用父元素宽度计算的。为什么？好问题。我不知道，但这里有一些关于这个话题的讨论：

这是您使用设置了宽度的

#col3wrap

的演示：

尝试调整宽度以查看边距顶部值随宽度的变化

所以你必须找到一种不同的方法，而不是使用边距顶部，来垂直居中你的进度条

这里有一种方法，使用

position:relative

并设置

top

值：

CSS

#col3wrap{
高度：50px；
背景：DDD；
位置：相对位置；
}
.profilepic{
宽度：50px；
高度：50px；
背景：红色；
浮动：左；
裕度：0 10px 0 0；
}
#普罗森巴尔{
浮动：左；
宽度：300px；
高度：20px；
背景：#eee；
位置：相对位置；
最高：30%；
顶部：-webkit计算（50%-10px）；
顶部：calc（50%-10px）；
}
#前进巴尔>分区{
背景颜色：绿色；
宽度：40%；
高度：20px；
}

---

注意：并非所有浏览器都支持此功能，因此我们必须后退。

请修改您的问题。。我只是不明白你想做什么。尤利西斯·科伦正在尝试将进度条垂直居中放置在容器盒内。当它调整大小时，进度条会从容器盒中掉出来div@UlisesColen-是的，因为您的项目是浮动的，并且您的父div具有固定的高度。当没有足够的宽度来并排容纳2个元素时，progressbar将下降到profilepic下方。这就是float的作用。如果这不是您想要的，您可以从进度条中删除float，并给它一个最大宽度，以便它在太宽时减小大小。这样地：

#col3wrap{
    height: 50px;
    background: #DDD;
}

.profilepic {
    width: 50px;
    height: 50px;
    background: red;
    float: left;
    margin: 0 10px 0 0;
}

#progressbarr {
    float: left;
    width: 300px;
    height: 20px;
    background: #eee;
    margin: 50% 0 0 0;
}

#progressbarr > div {
    background-color: green;
    width: 40%;
    height: 20px;
}