CSS% для вертикального поля, основанного на ширине вместо высоты

Question

Я хочу создать запас над моей учетной записьюOrderButton, чтобы ее можно было центрировать по вертикали. Я пытаюсь вычислить половину высоты родительского div минус половина высоты дочерних divs.

Это должно центрировать кнопку, однако линия «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, без известково, добавить 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;, так как плавание предотвращает выполнение этой функции.

Чтобы получить float: left; эквивалентное позиционирование с Flexbox просто использовать:

.container { 
    display: flex; 
} 

Answer 3

Поскольку это распространенное заблуждение, это, вероятно, стоит обратиться @ комментарий CBroe в в ответ, так что другие легко найти его.

Процент рассчитывается по отношению к ширине из содержащего блока генерируемого бокса. Обратите внимание, что это верно для margin-top и margin-bottom.

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

Также обратите внимание, что calc(50%) не вычисления ничего на всех и идентичен 50%.