高さではなく幅に基づいた垂直マージンのCSS％

Question

accountOrderButtonの上にマージンを作成して、垂直にセンタリングできるようにしたいと思います。私は、親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、カルクせず、また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を使用するようにしてください。任意の方法で整列させる要素を保持するコンテナ要素を定義します。それはきっとあなたの％のアプローチで動作しますが、合わせるアイテムを垂直にフレキシボックスと非常に簡単です：

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

あなたはどの余白、ポジショニングまたは何か他のものを必要としません。 float: left;をフローティングとして使用すると、フレックスボックスの動作が妨げられますので、この場合はfloat: left;を削除する必要があります。

単に使用フレキシボックスでfloat: left;同等の位置を取得するには、次の代わりにmargin-topの

.container { 
    display: flex; 
} 

Answer 3

これは一般的な誤解であるので他の人が簡単にそれを見つけるので、それはおそらく、答えにCBroeさんのコメント@回す価値があります。

パーセンテージは、生成されたボックスの含むブロックの幅に対してを算出します。これはmargin-topとmargin-bottomでも同様です。

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

またcalc(50%)はすべてで何かを計算し、50%と同じですされていないことに注意してください。