Question

我有以下HTML结构：

<div class="slide active" id="sli-0-1">
    <div class="mediaWrapper" id="musWrapper">
        <div class="albumWrapper" id="albumWrap-1">
            .   .   .
        </div>
    </div>
</div>

有关整个代码，请参阅this jsFiddle

由于我将子div的高度设置为90％以补偿10％的垂直边距，我预计div将在其父div中垂直居中。如您所见，情况并非如此。我不知道为什么 - 从来没有遇到过这种问题，出于某种原因，我不能为我的生活找出可能因为这种行为而产生的问题。尝试使用填充而不是相同高度的边距 - 没有变化。试图仅将margin-top设置为5％，将height设置为90 - 无需更改。

这很可能是由我的一些愚蠢的错误引起的，在这种情况下我提前道歉。如果没有，如果有人关心向我解释，我将不胜感激。

谢谢。

Answer 1

这是因为基于百分比的margin-top值是相对于宽度而不是高度。如果您水平调整窗口大小，您会注意到这一点 - 请参阅相对于宽度的边距变化？

Box Model - 8.3 Margin properties

百分比是根据生成的框的包含块的宽度计算的。请注意，对于“margin-top”和“margin-bottom”也是如此。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

作为解决方法，您可以绝对定位元素并添加top: 5%以进行垂直居中。

Updated Example

div.albumWrapper {
    background: transparent;
    border: 1px solid #a00000;
    margin: 0 2%;
    width: 96%;
    height: 90%;
    z-index: 20;
    position: absolute;
    top: 5%;
}

Answer 2

通过将此行添加到与您想要影响的div相对应的css

来居中div

#id{margin: 0 auto;}

这将把你的div放在窗口中心

css保证金似乎是指身体而不是父母？

2 个答案: