基于宽度而不是高度的垂直边距的 CSS %

Question

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

这应该使按钮居中，但是“margin-top: calc(50%);”行 在我的 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，不使用 calc，还使用 ​​addleft: 50%;和 addtransform: 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;
}