Question

我希望在accountOrderButton上方创建一个边距，以便它可以垂直居中。我试图计算父div的一半高度减去子div高度的一半。

这应该使按钮居中，但是线条＆＃39; margin-top：calc（50％）;＆＃39;在我的CSS中返回父div的宽度。我如何获得高度？

HTML

<div id="accountOrder">
    <div id="accountOrderButton">
        Order Now!
    </div>
</div>

CSS

#accountOrder {
    width: 400px;
    float: left;
    height:100%;
    text-align: center;
}
#accountOrderButton {
    width: 100px;
    height: 20px;
    margin: 0 auto;
    margin-top: calc(50%);    <---- returns width instead of height
    padding: 20px;
    background-color: <?php echo $data['secondary_color']; ?>;
    border-radius: 10px;
}

Answer 1

使用top代替margin-top，无需计算，也可添加left: 50%;并添加transform: translate(-50%, -50%)将其移回自身高度和宽度的一半。这还需要使用孩子的绝对位置和父母的相对位置：

#accountOrder {
    width: 400px;
    float: left;
    height:100%;
    text-align: center;
    position: relative; /* added */
}
#accountOrderButton {
    position: absolute; /* added */
    width: 100px;
    height: 20px;
    top: 50%;  /* changed */
    left: 50%; /* added */
    transform: translate(-50%, -50%); /* added */
    padding: 20px;
    background-color: <?php echo $data['secondary_color']; ?>;
    border-radius: 10px;
}

Answer 2

如果您想对齐块元素，请尝试使用CSS flexbox。定义一个容器元素，该元素保存元素以您喜欢的任何方式对齐。它肯定适用于你的％方法，但使用flexbox可以很容易地垂直对齐项目：

#accountOrder {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

您不需要任何边距，定位或其他内容。请注意，您必须删除float: left;，因为浮动会阻止Flexbox执行此操作。

要使用flexbox获得float: left;等效定位，只需使用：

.container {
    display: flex;
}

Answer 3

由于这是一个常见的误解，因此将@ CBroe的评论转化为答案可能值得其他人轻易找到答案。

百分比计算相对于生成的框包含块的宽度。请注意，对于margin-top和margin-bottom也是如此。

http://w3.org/TR/CSS21/box.html#margin-properties

另请注意，calc(50%)并未计算任何内容并且与50%相同。

基于宽度而不是高度

3 个答案: